클릭 시 텍스트 표시/숨기기 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(); }); });
실행 예:
(Source: stackoverflow.com)
참고로 시간을 절약하고 싶은 경우 워드프레스 플러그인, jQuery 템플릿 등을 판매하는 CodeCanyon에서 저렴한 비용에 자바스크립트/jQuery 템플릿, PHP 스크립트 등의 코드 스크립트를 구입하여 사용할 수 있습니다. 현재 28,500여 개 항목이 판매되고 있습니다.
참고:
일부 글에 제휴 링크가 포함될 수 있으며 파트너스 활동으로 일정액의 수수료를 받을 수 있습니다.