Bootstrap 3 collapse change chevron icon on click

Question

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

Answer 1

For change collapse icon in Bootstrap 4 with minimal html change, I've done

• Add to css:

  a[data-toggle="collapse"]:after {
      font-family: 'Glyphicons Halflings';
      content: "\e114";
      float: right;
      color: #4285F4;
  }
  a[data-toggle="collapse"].collapsed:after {
      content: "\e080";
  }
  @font-face {
      font-family: 'Glyphicons Halflings';
      src: url('../fonts/glyphicons-halflings-regular.eot');
      src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
      url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'),
      url('../fonts/glyphicons-halflings-regular.woff') format('woff'),
      url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'),
      url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
  }
  

• Put fonts in proper place, related to css:

  \css\style.css
  \fonts\glyphicons-halflings-regular.eot
  \fonts\glyphicons-halflings-regular.svg
  \fonts\glyphicons-halflings-regular.ttf
  \fonts\glyphicons-halflings-regular.woff
  \fonts\glyphicons-halflings-regular.woff2
  

• And add class="collapsed" to all collapsed (by default) links:

  <a href="#info" data-toggle="collapse" class="collapsed">Collapsed link</a>
  <div id="info" class="collapse">
  

Answer 2

The problem is with your jQuery code not being correct.

You're closing the event handler function early on this line:

$('#serviceList').on('shown.bs.collapse'), function() {

See that second closing parenthesis? That's closing the 'on' function early. Try changing your jQuery to look like this:

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

Answer 3

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

Answer 4

The simplest answer I could find and thought it would be useful to add here for others.

Essentially this involved this bit of css

/* Rotating glyphicon when expanding/collapsing */
.collapse-chevron .glyphicon {
  transition: .3s transform ease-in-out;
}
.collapse-chevron .collapsed .glyphicon {
  transform: rotate(-90deg);
}

which applied to this bit of html

<div class="collapse-chevron">
  <a data-toggle="collapse" class="collapsed" href="#collapseFilter">
     <span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span>
     <strong>link to toggle</strong>
  </a>
  <div class="collapse" id="collapseFilter">
    <p>Some content I want collapsed or expanded</p>
  </div>
</div>

Codepen of this code: https://codepen.io/anon/pen/PKxzVa

Source: this article

See the codepen from the article for some more examples: https://codepen.io/disjfa/pen/EZdMpe

Answer 5

fixed the issue changing HTML/CSS

HTML:

<a data-toggle="collapse" href="#doc" class="yt-toggle collapsed">View Doc 
    <i class="fa fa-caret-right fa-fw"></i> 
    <i class="fa fa-caret-down fa-fw"></i>
</a>

CSS:

.yt-toggle.collapsed .fa-caret-down {
  display: none;
}

.yt-toggle.collapsed .fa-caret-right {
  display: inline-block;
}

.yt-toggle .fa-caret-right {
  display: none;
}

Answer 6

if you use angularjs you can try this.

.html

<button ng-click="enlarge(x.ID)" class="{{fullglyphon[x.ID]}}" ng-init="fullglyphon[x.ID] = 'btn btn-xs btn-primary glyphicon glyphicon-resize-full'"></button>

.js

    $scope.enlarge = function(myID) { 
                $scope.fullglyphon[myID] = "btn btn-xs btn-primary glyphicon glyphicon-resize-small";
}

toggle last one or do if comparison

if ( $scope.fullglyphon[myID] == "btn btn-xs btn-primary glyphicon glyphicon-resize-small" ) {
                    $scope.fullglyphon[myID] = "btn btn-xs btn-primary glyphicon glyphicon-resize-full";
            }else{
                 $scope.fullglyphon[myID] = "btn btn-xs btn-primary glyphicon glyphicon-resize-small";
                }