Как использовать функцию jQuery toggle несколько раз

Question

У меня есть страница, на которой будет около 30 или около того. Я хочу, чтобы они открывали/закрывали, не записывая следующие 28 раз. Как мне это сделать?

Первый один:

$(document).ready(function(){ 
    $("#one").hide(); 
    $("#hide1").click(function(){ 
     $("#one").slideToggle(2000); 
    }); 
}); 

Второй один:

$(document).ready(function(){ 
    $("#two").hide(); 
    $("#hide2").click(function(){ 
     $("#two").slideToggle(2000); 
    }); 
}); 

бы больше смысла, чтобы изменить идентификаторы на что-то вроде # toggle1, а затем использовать старты-селектором = или что-то подобного?

Answer 1

Я бы рекомендовал эту разметку:

<!-- The element to click --> 
<button id="one" class="button">Button</button> 

<!-- The element to toggle --> 
<div class="target-button" data-trigger="one">...</div> 

JQuery

// Attach an event listener for .button class 
$(document).on('click', '.button', function() { 
    // Find the .target-button element 
    // that has a 'data-trigger' attribute value equal to the clicked element's id 
    $('.target-button[data-trigger="' + $(this).attr('id') + '"]').slideToggle(2000); 
}); 

ПРИМЕЧАНИЕ

• this returnes на Clicked элемент (JavaScript DOM элемент).
• $(this) только объект JQuery из this