None None - 7 months ago 8
Javascript Question

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>');
}
});

Answer

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.