Change Twitter upload 3.0 crash icon

Question

It's about Bootstrap 3.0. I would like the icon / glyphicon to change on crash. Ie, from a private folder to an open one.

I searched around the world and read topics here on SO, but to no avail. This stream was close, and basically I want. How can I make it work in Bootstrap 3?

Answer 1

This code finds your accordion with the identifier "Accordion". When the event shown is triggered on a folded panel, the icon is displayed on the title bar (previous element), and it finds and modifies your icon icon in this block of HTML code:

$('#accordion .panel-collapse').on('shown.bs.collapse', function () { $(this).prev().find(".glyphicon").removeClass("glyphicon-chevron-right").addClass("glyphicon-chevron-down"); }); //The reverse of the above on hidden event: $('#accordion .panel-collapse').on('hidden.bs.collapse', function () { $(this).prev().find(".glyphicon").removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-right"); }); 

Answer 2

collapse events are handled differently in Bootstrap 3. Now it will be something like:

 $('#collapseDiv').on('shown.bs.collapse', function () { $(".glyphicon").removeClass("glyphicon-folder-close").addClass("glyphicon-folder-open"); }); $('#collapseDiv').on('hidden.bs.collapse', function () { $(".glyphicon").removeClass("glyphicon-folder-open").addClass("glyphicon-folder-close"); }); 

Demo: http://www.bootply.com/73101

Answer 3

For the bootstrap reset button, plus and minus.

HTML

 <div> <a data-toggle="collapse" href="#other"> <h3>Others<span class="pull-right glyphicon glyphicon-plus"></span></h3> </a> <div id="other" class="collapse"> <h1>Others are</h1> </div> </div> 

Javascript

 $(document).ready(function () { $('.collapse') .on('shown.bs.collapse', function() { $(this) .parent() .find(".glyphicon-plus") .removeClass("glyphicon-plus") .addClass("glyphicon-minus"); }) .on('hidden.bs.collapse', function() { $(this) .parent() .find(".glyphicon-minus") .removeClass("glyphicon-minus") .addClass("glyphicon-plus"); }); }); 

Answer 4

This is a CSS based solution that is based on the default implementation of the bootstrap.js collapse. No additional HTML markup is required (feel free to replace the font-awesome glyphics, of course).

 <style> .panel-title > a:before { font-family: FontAwesome; content: "\f07c"; padding-right: 5px; } .panel-title > a.collapsed:before { content: "\f07b"; } </style> 

DEMO (Bootstrap 3.3.7):

DEMO (Bootstrap 4.0 b):

Answer 5

You can also use the class as a target instead of an identifier.

  <a data-toggle="collapse" href=".details"> <div class="details collapse in">Show details</div> <div class="details collapse">Hide details</div> </a> <div class="details collapse"> ... </div> 

Answer 6

Collapse events are processed as:

 $('#collapse').on('shown.bs.collapse', function () { $(".glyphicon") .removeClass("glyphicon-folder-close") .addClass("glyphicon-folder-open"); }); $('#collapse').on('hidden.bs.collapse', function () { $(".glyphicon") .removeClass("glyphicon-folder-open") .addClass("glyphicon-folder-close"); }); 

Answer 7

Here is my solution:

 $('.navbar-toggle').on('click', function() { $(this).toggleClass('mobile-close'); }) 

Hide default icon strings:

 .mobile-close span { display: none !important; } 

Then you can style mobile-close something like:

 .navbar-toggle.mobile-close { cursor: pointer; width: 42px; height: 32px; line-height: 40px; } .navbar-toggle.mobile-close:before { content: "×"; font-size: 40px; color: #231f20; } 

Answer 8

Using only CSS, the bootstrap collapse icon can be changed using predefined icons:

 a[aria-expanded=true] .glyphicon-plus { display: none; } a[aria-expanded=false] .glyphicon-minus { display: none; } .pointer{ cursor:pointer; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <a data-toggle="collapse" class="pointer" aria-expanded="false" data-target="#testCollpase" aria-controls="#testCollpase" > <span class="pull-left title-sidebar">Filter By Price</span> <span class="pull-right"><i class="glyphicon glyphicon-plus"></i></span> <span class="pull-right"><i class="glyphicon glyphicon-minus"></i></span> <div class="clearfix"></div> </a> <div id="testCollpase" class="collapse"> <ul> <li><a href="#">500$</a></li> <li><a href="#">1000$</a></li> </ul> </div> 

In your HTML, add aria-expanded="false" and add the two icons that you need to set in the minimize panel. How,

 <a data-toggle="collapse" class="pointer" aria-expanded="false" data-target="#testCollpase" aria-controls="#testCollpase" > <span class="pull-left title-sidebar">Filter By Price</span> <span class="pull-right"><i class="glyphicon glyphicon-plus"></i></span> <span class="pull-right"><i class="glyphicon glyphicon-minus"></i></span> </a> 

And manage it from css. When the panel collapse expand, then

 a[aria-expanded=true] .glyphicon-plus { display: none; } 

otherwise it will be

 a[aria-expanded=false] .glyphicon-minus { display: none; } 

Run the snippet and I think you just need this ...

Answer 9

This work is great for a bootstrap crash:

 <script> $(document).ready(function () { $('#collapseExample').on('hidden.bs.collapse', function () { $("#btnDown").removeClass("glyphicon-chevron-up").addClass("glyphicon-chevron-down"); }) $('#collapseExample').on('shown.bs.collapse', function () { $("#btnDown").removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up"); }) }); </script> 

This is the HTML code that I use:

 <div class="collapse" id="collapseExample"> <div class="well"> ... </div> </div> <button class="btn btn-default" type="button" data-toggle="collapse" data- target="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> <span id="btnDown" class="glyphicon glyphicon-chevron-down"></span> Settings </button>