аккордеон на js

Всем привет! Делаю простой аккордеон. Вот его код -

<ul class="accordion" data-accordion="open">
    <li>
        <div class="accordion-header">First</div>
        <div class="accordion-body">desc for accordion</div>
    </li>
    <li>
        <div class="accordion-header">Second</div>
        <div class="accordion-body">desc for accordion</div>
    </li>
    <li>
        <div class="accordion-header">Third</div>
        <div class="accordion-body">desc for accordion</div>
    </li>

Далее хочу сделать чтобы в зависимости от того на какой элемент нажал - тот бы и открывался, но сейчас при нажатии на любой из элементов аккордеона у меня открываются все, так вот вопрос - как сделать чтобы открывался только тот body на header которого мы нажали?

вот код js :

$(".accordion-header").click(function () {
            console.log(data);


            if($(".accordion-header").hasClass("active")){
                $(".accordion-body").slideUp();
                $(".accordion-header").removeClass("active");

            }else{
                $(".accordion-header").addClass("active");
                $(".accordion-body").slideDown();
            };

        });