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