Twitter bootstrap collapse change display of toggle button

Question

I am using Twitter Bootstrap to create collapsible sections of text  The sections are expanded when a   button  is pressed  My html code as follows    lt div class  row-fluid summary  gt       lt div class  span11  gt           lt h2 gt MyHeading lt  h2 gt         lt  div gt       lt div class  span1  gt           lt button type  button  class  btn btn-success  data-toggle  collapse  data-target   intro  gt   lt  button gt       lt  div gt   lt  div gt   lt div class  row-fluid summary  gt       lt div id  intro  class  collapse  gt           Here comes the text         lt  div gt   lt  div gt    Is there a way to change the button to display - instead of   after the section is expanded  and change back to   when it is collapsed again    Additional information  I hoped there would be a simple twitter-bootstrap css html-based solution to my problem  All responses so far make use of JavaScript or PHP  Because of this I want to add some more information about my development environment  I want to use this solution inside a SilverStripe-based  version 3 0 5  website which has some implications for the use of both PHP as well as JavaScript

User · Answer

Some may take issue with changing the Bootstrap js (and perhaps validly so) but here is a two line approach to achieving this.

In bootstrap.js, look for the Collapse.prototype.show function and modify the this.$trigger call to add the html change as follows:

this.$trigger
  .removeClass('collapsed')
  .attr('aria-expanded', true)
  .html('Collapse')

Likewise in the Collapse.prototype.hide function change it to

this.$trigger
  .addClass('collapsed')
  .attr('aria-expanded', false)
  .html('Expand')

This will toggle the text between "Collapse" when everything is expanded and "Expand" when everything is collapsed.

Two lines. Done.

EDIT: longterm this won't work. bootstrap.js is part of a Nuget package so I don't think it was propogating my change to the server. As mentioned previously, not best practice anyway to edit bootstrap.js, so I implemented PSL's solution which worked great. Nonetheless, my solution will work locally if you need something quick just to try it out.

User · Answer

My following JS solution is better than the other approaches here because it ensures that it will always say  open  when the target is closed  and vice versa   HTML    lt a href   collapseExample  class  btn btn-primary  data-toggle  collapse  data-toggle-secondary  Close  gt      Open  lt  a gt   lt div class  collapse  id  collapseExample  gt     lt div class  well  gt             lt  div gt   lt  div gt    JS       data-toggle-secondary    each function         var  toggle     this       var originalText    toggle text        var secondaryText    toggle data  toggle-secondary        var  target      toggle attr  href           target on  show bs collapse hide bs collapse   function             if   toggle text      originalText                 toggle text secondaryText             else                toggle text originalText                           Examples    x000D   x000D      data-toggle-secondary    each function     x000D      var  toggle     this   x000D      var originalText    toggle text    x000D      var secondaryText    toggle data  toggle-secondary    x000D      var  target      toggle attr  href     x000D   x000D       target on  show bs collapse hide bs collapse   function     x000D          if   toggle text      originalText    x000D               toggle text secondaryText   x000D            else   x000D               toggle text originalText   x000D            x000D          x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt link href  http   netdna bootstrapcdn com twitter-bootstrap 2 3 1 css bootstrap-combined min css  rel  stylesheet   gt  x000D   lt script src  http   netdna bootstrapcdn com twitter-bootstrap 2 3 1 js bootstrap min js  gt  lt  script gt  x000D   x000D   lt a href   collapseExample  class  btn btn-primary  data-toggle  collapse  data-toggle-secondary  Close  gt  x000D      Open x000D   lt  a gt  x000D   lt div class  collapse  id  collapseExample  gt  x000D     lt div class  well  gt  x000D          x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    JS Fiddle  Other benefits of this approach    the code is DRY and reusable each collapse button stays separate you only need to put one change into the HTML  adding the data-toggle-secondary attribute

User · Answer

I guess you could look inside your downloaded code where exactly there is a   sign  but this might not be very easy    What I d do   I d find the class id of the DOM elements that contain the   sign  suppose it s   collapsible   and with Javascript  actually jQuery     lt script gt         document  ready function              var content     collapsible   html   replace       -                 collapsible   html content              lt  script gt    edit Alright    Sorry I haven t looked at the bootstrap code    but I guess it works with something like slideToggle  or slideDown and slideUp    Imagine it s a slideToggle for the elements of class  collapsible  which reveal contents of some  info elements  Then                 collapsible   click function                   var content     collapsible   html                 if   this  next   css  display        none                           collapsible   html content replace       -                                 else     collapsible   html content replace  -                         This seems like the opposite thing to do  but since the actual animation runs in parallel  you will check css before animation  and that s why you need to check if it s visible  which will mean it will be hidden once the animation is complete  and then set the corresponding   or -

User · Answer

try this  http   jsfiddle net fVpkm   Html -   lt div class  row-fluid summary  gt       lt div class  span11  gt           lt h2 gt MyHeading lt  h2 gt         lt  div gt       lt div class  span1  gt           lt button class  btn btn-success  data-toggle  collapse  data-target   intro  gt   lt  button gt       lt  div gt   lt  div gt   lt div class  row-fluid summary  gt       lt div id  intro  class  collapse  gt           Here comes the text         lt  div gt   lt  div gt    JS -     button   click function      you can give id or class name here for    button         this  text function i old           return old          -                       Update With pure Css  pseudo elements  http   jsfiddle net r4Bdz   Supported Browsers  button btn collapsed before       content           display block      width 15px    button btn before       content  -        display block      width 15px      Update 2 With pure Javascript   http   jsfiddle net WteTy   function handleClick         this value    this value           -            document getElementById  collapsible   onclick handleClick

User · Answer

I liked the CSS-only solution from PSL  but in my case I needed to include some HTML in the button  and the content CSS property is showing the raw HTML with tags in this case   In case that could help someone else  I ve forked his fiddle to cover my use case  http   jsfiddle net brunoalla 99j11h40 2   HTML    lt div class  row-fluid summary  gt       lt div class  span11  gt           lt h2 gt MyHeading lt  h2 gt         lt  div gt       lt div class  span1  gt           lt button class  btn btn-success collapsed  data-toggle  collapse  data-target   intro  gt               lt span class  show-ctrl  gt                   lt i class  fa fa-chevron-down  gt  lt  i gt  Expand              lt  span gt               lt span class  hide-ctrl  gt                   lt i class  fa fa-chevron-up  gt  lt  i gt  Collapse              lt  span gt                       lt  button gt       lt  div gt   lt  div gt   lt div class  row-fluid summary  gt       lt div id  intro  class  collapse  gt           Here comes the text         lt  div gt   lt  div gt    CSS   button btn  show-ctrl      display  none    button btn  hide-ctrl      display  block    button btn collapsed  show-ctrl      display  block    button btn collapsed  hide-ctrl      display  none

User · Answer

Here s another CSS only solution that works with any HTML layout   It works with any element you need to switch  Whatever your toggle layout is you just put it inside a couple of elements with the if-collapsed and if-not-collapsed classes inside the toggle element   The only catch is that you have to make sure you put the desired initial state of the toggle  If it s initially closed  then put a collapsed class on the toggle   It also requires the  not selector  so it doesn t work on IE8   HTML example    lt a class  btn btn-primary collapsed  data-toggle  collapse  href   collapseExample  gt     lt  --You can put any valid html inside these -- gt     lt span class  if-collapsed  gt Open lt  span gt     lt span class  if-not-collapsed  gt Close lt  span gt   lt  a gt   lt div class  collapse  id  collapseExample  gt     lt div class  well  gt             lt  div gt   lt  div gt    Less version    data-toggle  collapse          amp  collapsed  if-not-collapsed            display  none             amp  not  collapsed   if-collapsed            display  none            CSS version    data-toggle  collapse   collapsed  if-not-collapsed     display  none     data-toggle  collapse   not  collapsed   if-collapsed     display  none      JS Fiddle

User · Answer

You do like this  the function return the old text      button   click function               this  text function i old               return old   Read More      Read Less     Read More

User · Answer

All the other solutions posted here cause the toggle to get out of sync if it is double clicked  The following solution uses the events provided by the Bootstrap framework  and the toggle always matches the state of the collapsible element   HTML    lt div class  row-fluid summary  gt       lt div class  span11  gt           lt h2 gt MyHeading lt  h2 gt         lt  div gt       lt div class  span1  gt           lt button id  intro-switch  class  btn btn-success  data-toggle  collapse  data-target   intro  gt   lt  button gt       lt  div gt   lt  div gt   lt div class  row-fluid summary  gt       lt div id  intro  class  collapse  gt           Here comes the text         lt  div gt   lt  div gt    JS       intro   on  show   function           intro-switch   html  -          intro   on  hide   function           intro-switch   html           That should work for most cases    However  I also ran into an additional problem when trying to nest one collapsible element and its toggle switch inside another collapsible element  With the above code  when I click the nested toggle to hide the nested collapsible element  the toggle for the parent element also changes  It may be a bug in Bootstrap  I found a solution that seems to work  I added a  collapsed  class to the toggle switches  Bootstrap adds this when the collapsible element is hidden but they don t start out with it   then added that to the jQuery selector for the hide function   http   jsfiddle net fVpkm 87   HTML    lt div class  row-fluid summary  gt       lt div class  span11  gt           lt h2 gt MyHeading lt  h2 gt         lt  div gt       lt div class  span1  gt           lt button id  intro-switch  class  btn btn-success collapsed  data-toggle  collapse  data-target   intro  gt   lt  button gt       lt  div gt   lt  div gt   lt div class  row-fluid summary  gt       lt div id  intro  class  collapse  gt           Here comes the text    lt br gt           lt a id  details-switch  class  collapsed  data-toggle  collapse  href   details  gt Show details lt  a gt           lt div id  details  class  collapse  gt              More details             lt  div gt       lt  div gt   lt  div gt    JS       intro   on  show   function             intro-switch   html  -          intro   on  hide   function             intro-switch collapsed   html              details   on  show   function             details-switch   html  Hide details          details   on  hide   function             details-switch collapsed   html  Show details

User · Answer

Add some jquery code  you need jquery to do this     lt script gt              btn data-toggle  collapse     click function                 if    this  text                               this  text  -                  else                     this  text                                          lt  script gt

User · Answer

Easier with inline coding   lt button type  button  ng-click  showmore    showmore   null  amp  amp  showmore    false   true   class  btn float-right  data-toggle  collapse  data-target   moreoptions  gt               lt span class  glyphicon  ng-class  showmore    glyphicon-collapse-up    glyphicon-collapse-down   gt  lt  span gt                 showmore   null  amp  amp  showmore    Hide More Options     Show More Options              lt  button gt     lt div id  moreoptions  class  collapse  gt Your Panel lt  div gt

[javascript] Twitter bootstrap collapse: change display of toggle button

Examples related to javascript

Examples related to html

Examples related to css

Examples related to twitter-bootstrap

Examples related to silverstripe