Question

I have a bunch of divs that I am expanding/retracting individually using .toggle and would like to have one button that will expand/retract all at the same time. So if one of them is already expanded/retracted it will stay expanded/retracted when clicked but the rest will expand/retract.

Here is what I am using for the individual divs:

$('.toggle-engine').click(function() {
    $('.specs-engine').toggle(400);
$(this).text($(this).text() == '+' ? '-' : '+');
return false;
});

Tried this for expand/retract all but if one of them was already expanded when I clicked expand all it retracted:

$('.expand-all').click(function() {
            $('.specs-body').toggle(400)
    $('.specs-engine').toggle(400)
    $('.specs-curb').toggle(400)
    $('.specs-cap').toggle(400)
    $('.specs-fuel').toggle(400)
    $('.specs-brakes').toggle(400);
$(this).text($(this).text() == '+ Expand All' ? '- Retract All' : '+ Expand All');
return false;
});

Here is the mark up:

<a class="expand-all" href="#">+ Expand All</a>
    <a class="toggle-engine" href="#">+</a>
    <div class="expand specs-engine"></div>
    <a class="toggle-body" href="#">+</a>
    <div class="expand specs-engine"></div>

Answer 1

You can use show or hide instead of toggle to force it to expand (show) or retract (hide) the elements.

Also, I recommend setting a common class to all the .specs-... elements, like specs, so for example:

<div class="specs specs-engine"></div>
<div class="specs specs-curb"></div>
... etc

So the JS would be:

$('.specs').click(function() {$(this).toggle(400);});
$('.expand-all').click(function() {
  if ($(this).text() == '+ Expand All')
    $('.specs').show(400);
  else
    $('.specs').hide(400);
  $(this).text($(this).text() == '+ Expand All' ? '- Retract All' : '+ Expand All');
});

EDIT: to make the individual +/- images toggle, do something like:

$('.specs').click(function() {$(this).toggle(400);});
$('.expand-all').click(function() {
  if ($(this).text() == '+ Expand All')
    $('.specs').show(400).find('img.plus, img.minus').hide().filter('img.plus').show();
  else
    $('.specs').hide(400).find('img.plus, img.minus').hide().filter('img.minus').show();
  $(this).text($(this).text() == '+ Expand All' ? '- Retract All' : '+ Expand All');
});

EDIT2: if I understand correctly:

$('.specs').click(function() {$(this).toggle(400);});
$('.expand-all').click(function() {
  if ($(this).text() == '+ Expand All')
    $('.specs').show(400).find('.thelink').text('-');
  else
    $('.specs').hide(400).find('.thelink').text('+');
  $(this).text($(this).text() == '+ Expand All' ? '- Retract All' : '+ Expand All');
});

Anyway, you get it, it’s a matter of selecting the right element and changing its text. jQuery does this for all the elements it finds with that single function call.