Продолжаем пополнять копилку простых решений на 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 и рассматривать все возможные варианты решения задачи.