CODEWITHSUNDEEP
jquery
None
None

Reputation: 9247

How to change arrow and text on click?

So i have this Demo I want when user click on Advanced it will expand menu and it will change text "ADVANCED" to "BASIC" and it will change arrow from down to UP. Any suggestion?

function toggleChevron(e) {
    $(e.target)
   .prev('.panel-heading')
   .find("i")
   .toggleClass('fa-angle-up fa-angle-down')
}

$('#accordion').on('hidden.bs.collapse shown.bs.collapse', toggleChevron);

Upvotes: 0

Views: 751

Answers (2)

Marc Bellêtre
Marc Bellêtre

Reputation: 597

You'll have to bind click event on your accordion instead of the ones you did. Then you change the text depending on what is already displayed.

function toggleChevron(e) {
    var text = $(e.target).html();

  if( $(e.target).find('i').hasClass('fa-angle-down') ) {
    $(e.target).html( text.replace('ADVANCED', 'BASIC') );
  } else {
    $(e.target).html( text.replace('BASIC', 'ADVANCED') );
  }

  $(e.target)
    .find('i')
    .toggleClass('fa-angle-up fa-angle-down');
}

$('#accordion').on('click', toggleChevron);

https://jsfiddle.net/L03e5hty/2/

EDIT : better answer here

Upvotes: 1

Ibrahim Khan
Ibrahim Khan

Reputation: 20740

I think you are looking for something like following.

function toggleChevron(e) {
    var link = $(this);
    if (link.text().trim() == 'ADVANCED')
        link.html('BASIC <i class="indicator fa fa-angle-up"></i>')
    else
        link.html('ADVANCED <i class="indicator fa fa-angle-down"></i>')
}

$('#headingOne a').on('click', toggleChevron);

DEMO

Upvotes: 1

Related Questions