jQuery与主开关切换

Question

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?

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.

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!

Any help would be greatly appreciated, thanks.

Script

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

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

Html

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

Here is the jfiddle of the code (thanks François Wahl): jsfiddle.net/GUYfG

Answer 1

若要展开折叠，可以在DIV中切换具有不同背景图像的类，或使用无序列表（UL / LI）。

Answer 2

Here is the working version in a proper format :-

$(document).ready(function() {

   $('.toggle').hide();

   $('.toggler').click( function() {
      var target = this.id + '_content';
      var imgtarget = this.id + '_expand';
          $('#' + target).slideToggle(function(){
                if( $('.toggle').is(':visible') ) {
                  $('.toggleall').text('Hide all');
                  $('<img src="images/collapse.gif">').prependTo('.toggleall');
              } else {
                  $('.toggleall').text('Show all');
                  $('<img src="images/expand.gif">').prependTo('.toggleall');
              }
          });

          if( $('.toggle').is(':visible') ) {
              $('.toggleall').text('Hide all');
          }
    });

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

 });

EDIT:

Here is the fiddle

I have edited the code check now. Also check the fiddle.