CODEWITHSUNDEEP
javascriptjqueryhtmlcss
anwartheravian
anwartheravian

Reputation: 1101

jQuery text not toggling on first click

I'm trying to toggle text of a span whenever it's parent anchor tag is clicked. Here is the HTML:

<h2 class="panel-title">
    <a href="#collapse1">
        <span class="ui-hidden-accessible">expand</span>
    </a>
</h2>

while this is the javascript of the changeText function which is called on each click of the anchor tag

function changeText() {
var taskDivClass = $('.panel-title a');
$(taskDivClass).each(
    function() {
        var $this =  $(this);
        if($this.hasClass('collapsed')) {
            var taskDivSpanText = $this.find('.ui-hidden-accessible');
            taskDivSpanText.html('expand');
        }
        else {
            var taskDivSpanText = $this.find('.ui-hidden-accessible');
            taskDivSpanText.html('collapse');
        }
    }
);
}

I'm using the each method because there are multiple such blocks in the page, and for each click event only that particular span should change.

The .collapsed class dynamically toggles on the anchor tag when user clicks on it.

The issue is when the first time user clicks on the anchor tag, the text is not toggled. On next click it does.

I'm really not sure what I'm missing here. If someone has a clue, please point it out.

Upvotes: 0

Views: 180

Answers (2)

rohin-arka
rohin-arka

Reputation: 799

If you dont want to add/remove class work with .html().

Hope this will help you..

$(document).ready(function(){
  $("a").click(function(){
    var spanClick= $(this).find('.ui-hidden-accessible');
    if (spanClick.html()==="Expand"){
     spanClick.html("Collapse");
    }
    else{
     spanClick.html("Expand");
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2 class="panel-title">
  <a href="#collapse1"   >
    <span class="ui-hidden-accessible">Expand</span>
  </a>
</h2>

https://jsfiddle.net/7vx1ueo1/2/

Upvotes: 2

blurfus
blurfus

Reputation: 14031

You do not need to loop - the original selector already applies to all the matching elements

$(function() {
  $('.panel-title a').on('click', function() {

    var $this = $(this);

    if ($this.hasClass('collapse')) {
      var taskDivSpanText = $this.find('.ui-hidden-accessible');
      $this.removeClass('collapse');
      taskDivSpanText.html('expand');

    } else {
      var taskDivSpanText = $this.find('.ui-hidden-accessible');
      taskDivSpanText.html('collapse');
      $this.addClass('collapse');
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2 class="panel-title">
    <a href="#collapse1" class="collapse">
        <span class="ui-hidden-accessible">collapse</span>
    </a>
</h2>
<h2 class="panel-title">
    <a href="#collapse2">
        <span class="ui-hidden-accessible">expand</span>
    </a>
</h2>
<h2 class="panel-title">
    <a href="#collapse3">
        <span class="ui-hidden-accessible">expand</span>
    </a>
</h2>

You could also encapsulate the function into a named function like in your code 

$(function() {
  // define function
  var changeText = function() {

    var $this = $(this);

    if ($this.hasClass('collapse')) {
      var taskDivSpanText = $this.find('.ui-hidden-accessible');
      $this.removeClass('collapse');
      taskDivSpanText.html('expand');

    } else {
      var taskDivSpanText = $this.find('.ui-hidden-accessible');
      taskDivSpanText.html('collapse');
      $this.addClass('collapse');
    }
  };

  // bind function to click event 
  $('.panel-title a').on('click', changeText );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2 class="panel-title">
    <a href="#collapse1" class="collapse">
        <span class="ui-hidden-accessible">collapse</span>
    </a>
</h2>
<h2 class="panel-title">
    <a href="#collapse2">
        <span class="ui-hidden-accessible">expand</span>
    </a>
</h2>
<h2 class="panel-title">
    <a href="#collapse3">
        <span class="ui-hidden-accessible">expand</span>
    </a>
</h2>

Upvotes: 2

Related Questions