jquery toggle with a master switch
<p>I am trying to use jquery toggling to show and hide features of a specific product. I have it working, however it's not perfect and wondered if anyone could help please?</p>

<p>Basically what I'm having problems with is that when you use the master open all and then close all of the individual items on their own, I need the master switch to revert back to show all text.</p>

<p>In addition I want to have a + and - icon on each of the items but can't figure out how to only replace the clicked image and not all of them in the list!</p>

<p>Any help would be greatly appreciated, thanks.</p>

<p><strong>Script</strong></p>

<pre><code>$(document).ready(function() {
    $('.toggle').hide();
    $('.toggler').click(function() {
        var target = this.id + '_content';
        var imgtarget = this.id + '_expand';
        $('#' + target).slideToggle();
        $('.toggleall').text('Hide all');
        $('&lt;img src="images/collapse.gif"&gt;').prependTo('.toggleall');
    });

    $('.toggleall').click(function() {
        if ($('.toggle').is(':visible')) {
            $('.toggle').slideUp();
            $('.toggleall').text('Show all');
            $('&lt;img src="images/expand.gif"&gt;').prependTo('.toggleall');
        } else {
            $('.toggle').slideDown();
            $('.toggleall').text('Hide all');
            $('&lt;img src="images/collapse.gif"&gt;').prependTo('.toggleall');
        }
    });
});
</code></pre>

<p><strong>Html</strong></p>

<pre><code>&lt;div class="toggleall"&gt;&lt;img src="images/expand.gif"&gt;Show all&lt;/div&gt;
        &lt;br&gt;&lt;br&gt;
        &lt;div class="toggler" id="toggle1"&gt;&lt;img src="images/expand.gif" class="toggle1_expand"&gt;Toggle 1&lt;/div&gt;
        &lt;div class="toggle" id="toggle1_content"&gt;only toggle1&lt;/div&gt;
        &lt;div class="toggler" id="toggle2"&gt;&lt;img src="images/expand.gif" class="toggle2_expand"&gt;Toggle 2&lt;/div&gt;
        &lt;div class="toggle" id="toggle2_content"&gt;only toggle2&lt;/div&gt;
        &lt;div class="toggler" id="toggle3"&gt;&lt;img src="images/expand.gif" class="toggle3_expand"&gt;Toggle 3&lt;/div&gt;
        &lt;div class="toggle" id="toggle3_content"&gt;only toggle3&lt;/div&gt;
</code></pre>

<p>Here is the jfiddle of the code (thanks François Wahl): <a href="http://jsfiddle.net/GUYfG" rel="nofollow">jsfiddle.net/GUYfG</a></p>
