Пользовательский аккордеон - используя каждый

Question

Я пытаюсь создать собственный аккордеон для моей страницы для отображения моих сообщений. Я использую его в формате списка с помощью HTML, и я пытаюсь создать эффект, когда вы нажимаете каждый заголовок, чтобы развернуть его, чтобы показать дополнительную информацию.

Но я не хочу сказать шесть блоков кода для шести из <li> элементов, которые есть у меня на странице.

Есть ли способ запустить его через .each(); возможно? Вместо создания каждого раздела? Попробуйте более динамичный подход.

Answer 1

Вы посмотрели this tutorial?

Потому что, поскольку это example illustrates, для этого не требуется несколько условий.

<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» свернута, когда страница загружена.

Функция «slideToggle()» jQuery используется для расширения и сглаживания «div» с помощью класса msg_body.

Когда пользователь нажимает на элемент с классом «.msg_head», затем div с классом «msg_body» рядом с ним, переключается с помощью эффекта скольжения, делая панель переключения с помощью jQuery.

Answer 2

Проверить это также довольно просто Demo: http://demos.pankaj.pro/jquery-tutorial-guide-to-build-a-simple-accordion/

код http://time2hack.com/2013/01/jquery-tutorial-guide-to-build-a-custom-and-simple-accordion.html