Combine jQuery expand all toggle functions

Question

I've got an FAQ page that has about 15 sections. Each question uses slideToggle to expand each answer. That's all fine. The trouble is each section needs an "expand/collapse all", which will expand all questions only within that specific section. The script I'm using works perfect, it's just that I have to create a block of the same script for each section .. example:

$('#faq-content a.all').click(function() {
    if ($(this).hasClass('collapse')) {
        $('#faq-content dt.opened').click();
    } else $('#faq-content dt:not(.opened)').click();
    $(this).toggleClass('expand collapse');
    return false;
});

$('#faq-hardware a.all').click(function() {
    if ($(this).hasClass('collapse')) {
        $('#faq-hardware dt.opened').click();
    } else $('#faq-hardware dt:not(.opened)').click();
    $(this).toggleClass('expand collapse');
    return false;
});

I was wondering if it's possible to have a unified way to control all sections.

Answer 1

You can trying using an the wildcard asterik *

$('#faq*).click(function() { ..

see: Find all elements on a page whose element ID contains a certain text using jQuery

Also you can give assign a class to each of the element you want to toggle and then using the class selector to expand/collapse.

Answer 2

Without knowing your structure of the dom, you should be able to do this with just some classes and remove the dependency for the Id

$('.faq a.all').click(function() {
    var $faq = $(this).parent(); //Where a is a child of .faq
    if ($(this).hasClass('collapse')) {
        $faq.find('dt.opened').click();
    } else{
      $faq.find('dt:not(.opened)').click();
    }
    $(this).toggleClass('expand collapse');
    return false;
});

Answer 3

I'd do something like

$("[id^=faq-]").click(function() { ..

That would allow you select any id's that begin with "faq-".

Good luck!