Продолжаем пополнять копилку простых решений на jQuery. На этот раз напишем простой список-аккордеон. Обычно такой прием используется при создании раздела "часто задаваемые вопросы".
то такое список-аккордеон? Это список со скрытыми пояснениями к каждому пункту, которые отображаются при клике по этому пункту. Обычно это происходит с анимацией. При этом одновременно открыто может быть только одно пояснение - остальные неактивные блоки автоматически сворачиваются.
Ниже приведен код, который нужно скопировать в созданный в блокноте файл с расширением html. Код скрипта можно не трогать, изменения вносятся лишь в html (содержание) и css (оформление). В секции <style> можно менять все что угодно, кроме display: none, иначе аккордеон при загрузке страницы будет полностью раскрыт.
Приведенный ниже код - это самый простой вариант решения "в лоб". Посмотрите, разберитесь как это работает, а уже потом переносите на свой проект, модифицировав под свои нужды.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Аккордеон Jquery</title> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <style> .question {cursor: pointer;} .ask > .question > div {display: none; background: #cde; padding: 20px; width: 300px; box-sizing: border-box;} </style> </head> <body> <h1>Простой аккордеон на jQuery</h1> <ul class="ask"> <li class="question"> <p>Как это работает</p> <div>Да в общем-то все просто - 3 строчки кода на jQuery и одна на CSS.</div> </li> <li class="question"> <p>Можно ли это как-то использовать?</p> <div>Да, обычно при помощи таких фич делают раздел FAQ.</div> </li> <li class="question"> <p>Сколько можно сделать вопросов?</p> <div>Сколько угодно!</div> </li> <li class="question"> <p>Как это сделать покрасивее?</p> <div>При помощи CSS можно сделать абсолютно любой вид!</div> </li> </ul> </body> <script> $(".question").click(function() { $(".question").children("div").slideUp(300); // закрываем все прежде открытые элементы, если такие есть if ($(this).children("div").is(":hidden")) {$(this).children("div").slideDown(300);} // если элемент закрыт, открываем его. Условие на тот случай, если нужно иметь возможность свернуть все элементы. }); </script> </html>
p.s. Возможно, код не блещет перфекционизмом, но моя задача - просто показать, как это работает и какие методы jQuery использовать. Я не ставил задачи писать развернутую документацию по jQuery и рассматривать все возможные варианты решения задачи.