Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap 3 collapse change chevron icon on click

I have read all related questions regarding my question and have tried them all to no avail. I can't seem to make my code work, even though I "think" almost every code I wrote was the same with the solutions posted on this site.

Here's the HTML Code:

<div class="press-title">   <p class="text" data-toggle="collapse" data-target="#serviceList">     <span id="servicesButton" data-toggle="tooltip " data-original-title="Click Me!">       <span class="servicedrop glyphicon glyphicon-chevron-down"></span> Services Offered <span class="servicedrop glyphicon glyphicon-chevron-down"></span>     </span>   </p> </div> <div id="serviceList" class="collapse">   <div class="row featurette">   ... 

Here's the JQuery

$('#serviceList').on('shown.bs.collapse'), function() {     $(".servicedrop").addClass('glyphicon-chevron-up').removeClass('glyphicon-chevron-down');   }  $('#serviceList').on('hidden.bs.collapse'), function() {     $(".servicedrop").addClass('glyphicon-chevron-down').removeClass('glyphicon-chevron-up');   } 

I just want to change the icon from down to up, upon collapsing the element. Then toggle back when the same class is clicked. I'm really stuck with this one. Thank you in advance!

like image 748
Dominic Avatar asked Sep 26 '13 09:09

Dominic


1 Answers

Pure CSS.

HTML part:

   <a data-toggle="collapse" href="#collapseExample"        aria-expanded="false" aria-controls="collapseExample">         Open/Close collapse         <i class="fa fa-chevron-right pull-right"></i>         <i class="fa fa-chevron-down pull-right"></i>     </a> 

The key element here is aria-expanded="false" or "true"

CSS:

a[aria-expanded=true] .fa-chevron-right {    display: none; } a[aria-expanded=false] .fa-chevron-down {    display: none; } 
like image 173
Roshaw Avatar answered Sep 18 '22 15:09

Roshaw