맞춤 아코디언 - 각각 사용

Question

내 게시물을 표시하기 위해 내 페이지에 대한 사용자 정의 아코디언을 만들려고합니다. HTML을 사용하여 목록 형식으로 가지고 있으며 각 헤더를 클릭하여 확장하여 더 많은 정보를 표시 할 때 효과를 만들려고합니다.

그러나 나는 6 개의 코드 블록을 말하고 싶지 않습니다. <li> 페이지에있는 요소.

.Each ()를 통과하는 방법이 있습니까? 아마도? 각 섹션을 만드는 대신? 보다 역동적 인 접근 방식을 시도하십시오.

Answer 1

당신은 보았습니까? 이 튜토리얼 ?

이로서 예를 보여줍니다,이를 달성하기 위해 여러 조건이 필요하지 않습니다.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
  //hide the all of the element with class msg_body
  $(".msg_body").hide();
  //toggle the componenet with class msg_body
  $(".msg_head").click(function()
  {
    $(this).next(".msg_body").slideToggle(600);
  });
});
</script>

"msg_body"라는 클래스 이름이있는 모든 요소가 페이지가로드되면 무너집니다.

jQuery의 "slidetoggle ()"함수는 클래스 "msg_body"로 "div"를 확장하고 붕괴시키는 데 사용됩니다.

사용자가 클래스 ".msg_head"로 요소를 클릭하면 옆에 "msg_body"클래스를 사용하여 슬라이딩 효과와 함께 전환하여 jQuery를 사용하여 토글 패널을 만듭니다.

Answer 2

이것도 매우 간단한 데모를 확인하십시오. http://demos.pankaj.pro/jquery-tutorial-guide-to-build-a-simple-accordion/

암호http://time2hack.com/2013/01/jquery-tutorial-guide-tobuild-a-custom-and-simple-accordion.html