JavaScript: аккордеон

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<div id="accordeon">

        <div class="acc-head">

            <h3>JavaScript</h3>

        </div>

        <div class="ac-body">

            JavaScript — прототипно-ориентированный сценарный язык программирования. Является реализацией языка ECMAScript.

        </div>

        <div class="acc-head">

            <h3>Jquery</h3>

        </div>

        <div class="acc-body">

            jQuery — библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML. Библиотека jQuery помогает легко получать доступ к любому элементу DOM, обращаться к атрибутам и содержимому элементов DOM, манипулировать ими. Также библиотека jQuery предоставляет удобный API для работы с AJAX. Сейчас разработка jQuery ведётся командой jQuery во главе с Джоном Резигом.

        </div>

        <div class="acc-head">

            <h3>DOM</h3>

        </div>

        <div class="acc-body">

            DOM — это не зависящий от платформы и языка программный интерфейс, позволяющий программам и скриптам получить доступ к содержимому HTML-, XHTML- и XML-документов, а также изменять содержимое, структуру и оформление таких документов.

        </div>

    <div class="acc-head">

            <h3>CSS</h3>

        </div>

        <div class="acc-body">

            CSS — формальный язык описания внешнего вида документа, написанного с использованием языка разметки.

        </div>

    </div>

​

​

    $('#accordeon .acc-head').on('click', f_acc);

});

function f_acc(){

  $('#accordeon .acc-body').not($(this).next()).slideUp(200);

    $(this).next().slideToggle(200);

}

    width: 800px;

    border: solid white;

    box-shadow: 0 0 10px;

    margin: auto;

}

.acc-head {

    padding: 1px 1px;

    background: gray;

    cursor: pointer;

}

.acc-body {

    padding: 10px;

    border-bottom: 1px solid #c0c0c0;

    margin-bottom: auto;

    display: none;

}