Упростите JavaScript Аккордеон

Question

У меня есть скрипт, который очень хорошо работает для создания аккордеонов.Единственная проблема заключается в том, что мне нужно постоянно создавать дополнительные разделы, чтобы добавить новый.Есть ли способ, которым это можно упростить, чтобы свести к минимуму дополнительную работу и сценарий?

 $(document).ready(function(){
    $(".accord-one").click(function(){
        $(".accordoneContent").slideToggle("normal");
    });
});
$(document).ready(function(){
    $('.accord-two').click(function(){
        $(this).next('.accordtwoContent').slideToggle("normal");
         return false;
    });
});
$(document).ready(function(){
    $('.accord-three').click(function(){
        $(this).next('.accordthreeContent').slideToggle("normal");
         return false;
    });
});
$(document).ready(function(){
    $('.accord-four').click(function(){
        $(this).next('.accordfourContent').slideToggle("normal");
         return false;
    });
});

Answer 1

Что если вы просто удалите "цифры"?

$(document).ready(function() {
  $(".accord").click(function() {
    $(this).next(".accordContent").slideToggle("normal");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="accord">button 1</div>
<div class="accordContent" style="display:none">content 1</div>
<div class="accord">button 2</div>
<div class="accordContent" style="display:none">content 2</div>

Answer 2

В вашей разметке измените все классы аккордеона (accord-one, accord-two и т. Д.) На accord, а затем измените все классы контента (accordoneContent, accordtwoContent и т. Д.) На accord-content.Тогда вам просто нужен этот код, чтобы они все работали ...

$(document).ready(function(){
    $('.accord').click(function(){
        $(this).next('.accord-content').slideToggle("normal");
         return false;
    });
});

Это прикрепит обработчик события click к каждому элементу accordion и ищет относительное содержимое для переключения.