클릭 시 텍스트 표시/숨기기 jQuery

링크를 클릭하면 해당 텍스트가 지정된 위치에 표시되고 다시 링크를 클릭하면 사라지는 jQuery 코드 샘플입니다.

참고로 워드프레스 엘리멘터 페이지 빌더나 아바다 테마 등을 사용하면 토글/아코디언 요소가 제공됩니다.

클릭 시 텍스트 표시/숨기기 jQuery

코드:

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(function () {
// text로 시작하는 모든 id를 숨김
$("[id^=text]").hide();

// 클래스가 일치하는 버튼을 가지지만, float_l 클래스가 아닌 요소
$(".button:not(.float_l)").click(function (e) {
e.stopPropagation();

// index가 클릭한 것과 일치하는 요소를 찾음
$("[id^=text]").eq($(this).index()).toggle();
});
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
</head>
<body>

<div class="button">
<div class="button float_l"><a href="#">자세히 1..</a></div>
</div>
<div class="button">
<div class="button float_l"><a href="#">자세히 2..</a></div>
</div>
<div class="button">
<div class="button float_l"><a href="#">자세히 3..</a></div>
</div>
<p>
<div id="text1">문장 1 - 자세히 1을 클릭할 때 표시</div>
</p>
<p>
<div id="text2">문장 2 - 자세히 2를 클릭할 때 표시</div>
</p>
<p>
<div id="text3">문장 3 - 자세히 3을 클릭할 때 표시</div>
</p>

</body>

예를 들어 "자세히 1"을 클릭하면 class가 text1에 해당하는 텍스트가 표시되고, 다시 "자세히 1"을 클릭하면 텍스트가 사라집니다. 위에서는 클릭하는 텍스트 부분의 div 요소를 보면 <div class="button">와 같이 모두 동일한데, 이 부분을 <div class="button" data-rel="1">(2번째 텍스트 링크 부분은 data-rel="2"...)로 바꾸고, jQuery 코드 부분을 다음과 같이 사용해도 결과는 동일합니다.

$(function () {
// Hide all elements which id starts with text.
$("[id^=text]").hide();

$(".button").click(function () {
$("#text" + $(this).data("rel")).toggle();
});
});
Show Hide text jQuery sample

실행 예:
(Source: stackoverflow.com)

참고로 시간을 절약하고 싶은 경우 워드프레스 플러그인, jQuery 템플릿 등을 판매하는 CodeCanyon에서 저렴한 비용에 자바스크립트/jQuery 템플릿, PHP 스크립트 등의 코드 스크립트를 구입하여 사용할 수 있습니다. 현재 28,500여 개 항목이 판매되고 있습니다.

코드캐년에서 판매되는 javascript/jQuery 템플릿
CodeCanyon에서 판매되는 javascript/jQuery 템플릿

참고:

일부 글에 제휴 링크가 포함될 수 있으며 파트너스 활동으로 일정액의 수수료를 받을 수 있습니다.

댓글 남기기

* 이메일 주소는 공개되지 않습니다.