CODEWITHSUNDEEP
jquery
None
None

Reputation: 9247

How to change text on one link by clicking on two different links?

So i have this demo :https://jsfiddle.net/gec5djan/ but i dont know how on one click change both text values. Any suggestion?

   $('h3.panel-title a').click(function(){
      if($(this).hasClass('collapsed')) {
          $(this).html('CLOSE <span class="arrow_right2"></span>');
    }
     else{
         $(this).html('SHOW ALL BOATS <span class="green-arrow-up"></span>');
    }
  });

Upvotes: 1

Views: 42

Answers (3)

Magnus Fohlstr&#246;m
Magnus Fohlstr&#246;m

Reputation: 84

I'm too late. Again.. This answer using short-circuit solution. 

$('h3.panel-title a').click(function(){
    var html = $('h3.panel-title a').hasClass('collapsed')   
        ? 'CLOSE <span class="arrow_right2"></span>' 
        : 'SHOW ALL BOATS <span class="green-arrow-up"></span>'
    $('h3.panel-title a').html( html );
});

JS Fiddle

Upvotes: 1

Kypaz
Kypaz

Reputation: 411

I don't know if that's what you want :

   $('h3.panel-title a').click(function(){
      if($(this).hasClass('collapsed')) {
          $('h3.panel-title a').html('CLOSE <span class="arrow_right2"> </span>');
   }
   else{
     $('h3.panel-title a').html('SHOW ALL BOATS <span class="green-arrow-up"></span>');
   }
   });

https://jsfiddle.net/gec5djan/1/

Upvotes: 1

Anton
Anton

Reputation: 4018

Instead of calling $(this).html() inside the click function you can use the selector that covers both items, like $('h3.panel-title a'):

HTML:

<h3 class="panel-title">
        <a class="collapsed" data-toggle="collapse" data-parent="#nested1" href="#nested-collapseOne">
            SHOW ALL BOATS <span class="arrow_right2"></span>
    </a>
</h3>

<h3 class="panel-title">
        <a class="collapsed" data-toggle="collapse" data-parent="#nested1" href="#nested-collapseOne">
            SHOW ALL BOATS <span class="arrow_right2"></span>
    </a>
</h3>

JavaScript:

   $('h3.panel-title a').click(function(){
      if($('h3.panel-title a').hasClass('collapsed')) {
          $('h3.panel-title a').html('CLOSE <span class="arrow_right2"></span>');
    }
     else{
         $('h3.panel-title a').html('SHOW ALL BOATS <span class="green-arrow-up"></span>');
    }
  });

All that being said, I would revisit the overall logic of your application. This doesn't seem to me like the cleanest way to enable this functionality though I don't know exactly what you're trying to ultimately do.

Upvotes: 3

Related Questions