jQuery onclick展开div并更改跨度内的文本

Question

I'm having a problem with my script where i click the H3 it will expand and only change the first text in span no matter if i click the second H3. After i wanna collapse it , it doesn't change back to the original text. What should i use ? TQ

   <script type="text/javascript">
    jQuery(document).ready(function() {
      jQuery(".pad").hide();

      //toggle the componenet with class msg_body
      jQuery(".heading").click(function()
      {
        jQuery(this).next(".pad").slideToggle(500);
        jQuery('#span1).html('&#8743;')
      });
    });
    </script>

<h3 class="heading">text1<span id="span1" style="float:right;">&#8744;</span></h3>
<div id="occ" class="pad">
content
</div>
<h3 class="heading">Text2<span id="span1" style="float:right;">&#8744;</span></h3>

<div id="tech" class="pad">
content
</div>

Answer 1

You need to set up a toggle function for the arrows. As this can't be done with the html codes you need to use ids so you can target them specifically here is the jquery you need:

$(document).ready(function () {
    $('.pad').hide();
    $('.heading').click(function () {
        $(this).next('.pad').slideToggle();
        if($(this).find('.span1').attr('id') == 'yes') {
            $(this).find('.span1').attr('id', '').html('∨');
        } else {
            $(this).find('.span1').attr('id', 'yes').html('∧');
        }
    });
});

Fiddle Demo:

http://jsfiddle.net/Hive7/5xueU/2/

Answer 2

Since you are selecting #span1, it's going to return only the first instance of that in your document every time. IDs must be unique. Try this instead:

<script type="text/javascript">
jQuery(document).ready(function() {
  jQuery(".pad").hide();

  //toggle the componenet with class msg_body
  jQuery(".heading").click(function()
  {
    jQuery(this).next(".pad").slideToggle(500);
    jQuery(this).find("span").html('&#8743;')
  });
});
</script>

<h3 class="heading">text1<span id="span1" style="float:right;">&#8744;</span></h3>
<div id="occ" class="pad">
content
</div>
<h3 class="heading">Text2<span id="span2" style="float:right;">&#8744;</span></h3>

<div id="tech" class="pad">
content
</div>

To toggle the arrows back, try checking for the visibility of the .pad element:

http://jsfiddle.net/tjnicolaides/W6nBG/

jQuery(document).ready(function () {
    jQuery(".pad").hide();

    //toggle the componenet with class msg_body
    jQuery(".heading").click(function () {
        var $pad = $(this).next(".pad");
        var $arrow = $(this).find("span");
        if ($pad.is(':visible')) {
            $arrow.html('∨');
        } else {
            $arrow.html('∧');
        }
        $pad.slideToggle(500);
    });
});

Answer 3

You can try this one

$(document).ready(function() {
    $(".pad").hide();
    //toggle the componenet with class msg_body
    $(".heading").click(function()
        $heading = $(this); 
        $(this).next(".pad").slideToggle(500,function() {
            var sign = $(this).is(':visible') ? '∧' : '∨';
            $heading.find('span').html(sign)
        });
    });
});

Answer 4

I did a JsFiddle version for you to look at here: http://jsfiddle.net/gUTTK/

jQuery(document).ready(function() {
    jQuery(".pad").hide();

    //toggle the componenet with class msg_body
    jQuery(".heading").click(function() {
        jQuery(this).next(".pad").slideToggle(500);

        if (jQuery(this).find('.span1').is(':visible')){
            jQuery(this).find('.span1').hide();
            jQuery(this).find('.span2').show();
        } else {
            jQuery(this).find('.span2').hide();
            jQuery(this).find('.span1').show();       
        }
    });
});

The HTML

<h3 class="heading">text1
    <span class="span1" style="float: right;">&#8744;</span>
    <span class="span2" style="float: right; display: none;">&#8743;</span>
</h3>
<div class="pad">content</div>

<h3 class="heading">text1
    <span class="span1" style="float: right;">&#8744;</span>
    <span class="span2" style="float: right; display: none;">&#8743;</span>
</h3>
<div class="pad">content</div>