Как я могу оптимизировать код?

26 февраля 2022, 15:00

Подскажите пожалуйста, как я могу оптимизировать такой код? Знаю, что как-то можно не писать кучу классов и id, а использовать переменную this. Однако, когда я попробовал через нее сделать, то у меня по нажатию на любое место срабатывает функция или просто тот элемент, по которому нажимал, закрывался. Ccылка на кодпен https://codepen.io/Misha_mishy/pen/abzRwrO?editors=1111

$(document).ready(function(){
    $( ".slideToggle-2" ).click(function(){        
      $(".toggle__content-2").slideToggle(); 
    });
    $( ".slideToggle-3" ).click(function(){        
      $(".toggle__content-3").slideToggle(); 
    });
    $( ".slideToggle-3" ).click(function(){
      $(".toggle__content-3").slideToggle(); 
    });
    $( ".slideToggle-4" ).click(function(){        
      $(".toggle__content-4").slideToggle(); 
    });

Answer 1

$('[class^=slideToggle]').on('click',function(){ 
    $(this).prev('[class^=toggle__content]').slideToggle(); 
});

.toggle__content-2, 
.toggle__content-3, 
.toggle__content-4{ 
  display: none; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<p class="toggle__content-2"> какой-то текст</p> 
 <div class="slideToggle-2">Показать текст </div> 
 
<p class="toggle__content-3"> какой-то текст</p> 
 <div class="slideToggle-3">Показать текст </div> 
 
<p class="toggle__content-4"> какой-то текст</p> 
 <div class="slideToggle-4">Показать текст </div>