Combine jQuery expand all toggle functions

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.

-------------Problems Reply------------

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')) {
} else{
$(this).toggleClass('expand collapse');
return false;

You can trying using an the wildcard asterik *

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

see: jQuery wildcard search

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.

I'd do something like

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

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

Good luck!

Category:jquery Views:0 Time:2011-03-21
Tags: jquery toggle

Related post

  • JQuery help creating toggle function 2011-08-03

    I am trying to create a function toggle menu. Want I want to do: When the user clicks on a menuitem div its checkbox should be checked and the minimenu should show underneath. If a user clicks again on the menuitem div the minmenu should hide and the

  • combine jquery calls into 1 function 2010-08-16

    I have the following jquery which animates on hover: $('#footerNetwork').hover(function(){ $('#popupNetwork').animate({top:'-62px'},{queue:true,duration:500}); }, function(){ $('#popupNetwork').animate({top:'30px'},{queue:true,duration:500}); }); $('

  • Jquery hover and toggle functions are not working in IE6? 2011-04-25

    This custom slider works fine in all the other browsers, but IE6/possibly 7 are being a pain as usual. As much as I'd like to use a premade slider, it is not an option. Here's the main code: $(document).ready(function() { //Slider Movement //Slide 1

  • Jquery If Statement - Toggle Functions 2011-08-25

    $(document).ready(function() { $("span#label_Flat").hide(); $("span#added_Flat").hide(); $("span#removed_Flat").hide(); if ($('#Flat:checked').val() != false) { $('#Flat').click(function() { $("span#label_Flat").toggle(); $("span#removed_Flat").toggl

  • JQuery problem with .toggle function 2011-07-31

    HTML: <div class="showcase"> <a href="#"><img src="img/uploads/testchair.jpg" alt="" /></a> <a href="#"><img src="img/uploads/testchair.jpg" alt="" /></a> <a href="#"><img src="img/uploads/testchair.

  • Jquery toggle functions 2010-04-05

    I've a code to sort table using Jquery.I use toggle function to alternate clicks,and toggle beetween 'ascend' and 'descend' sort.Once you click header's table it should sort it contents. However,there's a bug: I click once,it sorts,then when i click

  • Jquery toggle function problem with checkbox if else statement 2011-08-04

    I have a Jquery toggle function. I have made an if else statment to fix the bug when a checkbox i pressed directly its got checked and uncheched. Therefor I have maded a else if statement to check if the checkbox have been checked. But now the checkb

  • Colums resize when using JQuery UI's toggle in IE 2009-05-24

    Example code: <html> <head> <script src="jquery-1.3.2.min.js" type="text/javascript"></script> <script src="jquery-ui-1.7.1.custom.min.js" type="text/javascript"></script> </head> <body> <table borde

  • Combining jQuery Mobile taphold and jQuery UI draggable 2012-03-06

    I'm working on a mobile application where I'm trying to combine jQuery UI's draggable functionality with jQuery Mobile's taphold event. The idea is that an element becomes draggable when a taphold is executed. Draggable is being initialized on elemen

  • jquery how to combine two selectors to second function of single toggle event 2012-04-17

    If I have a regular toggle function bound to a click event $('#work-content a').toggle( function() { // first click stuff }, function() { // second click stuff } ); But, I also need to bind $(document).click event to the second function somehow. My l

  • What is the best way of "overriding" the .toggle() function of jquery? 2009-08-27

    I want to change the toggle function so that it changes the text of the link to say "show/hide" or "expand/collapse". The function definition and call in classic JS would be: function myToggle(expandText, collapseText, id,o){ // expandText: "expand",

  • Simple JQuery Expand All Collapse All Toggle 2011-10-20

    I am expanding and collapsing divs. I also allow expand all and collapse all. The problem is if a div is already expanded, when the user clicks expand all, the expanded div will get collapsed, while the other divs will expand (and vice versa). How ca

  • jQuery custom toggle function? 2011-12-21

    I'm trying to make a custom jQuery toggle function. Right now, I have 2 separate functions, lightsOn and lightsOff. How can I combine these functions to make them toggle (so I can just link to one function)? function lightsOn(){ $('#dim').fadeOut(500

  • jQuery Toggle function doesn't work on 1st click 2008-11-13

    I realized the solution to this problem while I was creating the documentation to ASK this I am posting the answer if for no other reason than to keep me from wasting time on this in the future --------------Solutions------------- toggl

  • JQuery toggle function rendering weird text in IE (losing ClearType?) 2009-01-19

    I have this little script to toggle a contact form when a button is clicked : $(document).ready(function(){ $("#button").click(function () { $("#form").toggle("slow"); }); }); All is working OK in Firefox, but in IE it seems like the toggle's fade-in

  • using jQuery toggle function on a table row makes table itself grow 2009-08-10

    I'm using the jQuery toggle effect hooked to the click() event of 1 table row to toggle the visibility of the next row (which also happens to be the final row in the table). If I click the firing row multiple times in succession, the table that conta

  • Jquery toggle function breaks on pages that include mootools or slimbox script 2009-08-28

    My friend is asked me to look over her site where there is an error on pages that use slimbox-- an unrelated Jquery toggle function breaks— here's the code: $(function() { $(".cat_nav dd").hide(); $(".cat_nav dt").click(function() { $(this).next().to

  • Toggle function in jquery 2009-09-26

    I have a button on click of which i want to either show/hide a content which is places in a div. How can we implement this? Also whats the error in the code below-- <head runat="server"> <title>Toggle Functionality</title> <scrip

  • JQuery - which .js do I need to download just to use the 'toggle' functionality? 2009-10-28

    What's the minimum JavaScript I need if all I want to do is use the JQuery toggle functionality? I'm confused if I need to download everything from Or if I can use just the base JQuery from --------------Soluti

Copyright (C), All Rights Reserved.

processed in 0.186 (s). 11 q(s)