Как сконденсировать несколько функций jQuery в одну краткую функцию?

Question

Надеюсь, кто-то может помочь! Я новичок jQuery/JS. Есть ли простой способ сконденсировать несколько функций в один. Я использую jQuery для расширения и сглаживания скрытых div. У меня это нормально работает с кодом ниже, но может быть 50+ (а не только 4), и я предполагаю, что будет способ сконденсировать их в небольшой кусок кода во имя оптимизации. Любая помощь будет очень благодарна. Вот JS ...

$('#toggle1').click(function() { 
    $('.toggle').slideToggle('fast'); 
    return false; 
    }); 

    $('#toggle2').click(function() { 
    $('.toggle2').slideToggle('fast'); 
    return false; 
    }); 
    $('#toggle3').click(function() { 
    $('.toggle3').slideToggle('fast'); 
    return false; 
    }); 

    $('#toggle4').click(function() { 
    $('.toggle4').slideToggle('fast'); 
    return false; 
    }); 

и вот HTML ...

<div class="docBlocA"> 
    <div class="docTitle" id="toggle1">Document Title Goes Here (click to expand)</div> 
    <div class="toggle1" style="display:none; width:100%;">Hidden div content here</div> 
</div><!--docBlocA--> 

<div class="docBlocB"> 
    <div class="docTitle" id="toggle2">Document Title Goes Here (click to expand)</div> 
    <div class="toggle2" style="display:none; width:100%;">Hidden div content here</div> 
</div><!--docBlocB--> 

<div class="docBlocA"> 
    <div class="docTitle" id="toggle3">Document Title Goes Here (click to expand)</div> 
    <div class="toggle3" style="display:none; width:100%;">Hidden div content here</div> 
</div><!--docBlocA--> 

<div class="docBlocB"> 
    <div class="docTitle" id="toggle4">Document Title Goes Here (click to expand)</div> 
    <div class="toggle4" style="display:none; width:100%;">Hidden div content here</div> 
B</div><!--docBlocB--> 

Большое спасибо заранее ...

Answer 1

Вы можете использовать селектор класса и next метод, this в пределах контекст обработчика относится к щелканному элементу.

$('div.docTitle').click(function(){ 
    $(this).next().slideToggle('fast'); 
}); 

Примечание: DIV элемент не имеет действия по умолчанию, так что вам не нужно return false, если вы не хотите, чтобы остановить распространение события.

Answer 2

$('#toggle1,#toggle2,#toggle3,#toggle4').click(function() { 
    $('.toggle').slideToggle('fast'); 
    return false; 
    }); 

Answer 3

использование

$('.docTitle').click(function() { 
    $(this).slideToggle('fast'); 
    });