CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user2982110
user2982110

Reputation: 105

jquery onclick expand div and change text inside span

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>

Upvotes: 0

Views: 5715

Answers (4)

TJ Nicolaides
TJ Nicolaides

Reputation: 975

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('&#8744;');
        } else {
            $arrow.html('&#8743;');
        }
        $pad.slideToggle(500);
    });
});

Upvotes: 0

kchang4
kchang4

Reputation: 92

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>

Upvotes: 0

Manish Jangir
Manish Jangir

Reputation: 5437

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') ? '&#8743;' : '&#8744;';
            $heading.find('span').html(sign)
        });
    });
});

Upvotes: 0

Hive7
Hive7

Reputation: 3675

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('&#8744;');
        } else {
            $(this).find('.span1').attr('id', 'yes').html('&#8743;');
        }
    });
});

Fiddle Demo:

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

Upvotes: 1

Related Questions