Twitter Bootstrap button click to toggle expand collapse text section above button

Question

I have recently come accross bootstrap and I am working on extending the hero example  I want to add the following behaviour to my page   When a button  i e  an element with selector   row  btn   is clicked on  I want to be able to toggle between expanding collapsing the portion of text above the button   This is what the HTML looks like    lt html gt     lt head gt         lt title gt Test Page lt  title gt       lt  -- Le styles -- gt       lt link href     assets css bootstrap css  rel  stylesheet  gt       lt style type  text css  gt        body           padding-top  60px          padding-bottom  40px               lt  style gt       lt link href     assets css bootstrap-responsive css  rel  stylesheet  gt     lt  head gt     lt body gt       lt div class  navbar navbar-fixed-top  gt       lt  div gt        lt div class  container  gt         lt div class  hero-unit  gt           lt h1 gt Hello  world  lt  h1 gt           lt p gt Blah  blah  lt  p gt           lt p gt  lt a class  btn btn-primary btn-large  gt Learn more  amp raquo  lt  a gt  lt  p gt         lt  div gt          lt  -- Example row of columns -- gt         lt div class  row  gt           lt div class  span4  gt             lt h2 gt Heading lt  h2 gt              lt p gt Donec id elit non mi porta gravida at eget metus  Fusce dapibus  tellus ac cursus commodo  tortor mauris condimentum nibh  ut fermentum massa justo sit amet risus  Etiam porta sem malesuada magna mollis euismod  Donec sed odio dui   lt  p gt             lt p gt  lt a class  btn  href     gt View details  amp raquo  lt  a gt  lt  p gt           lt  div gt         lt  div gt       lt  -- Placed at the end of the document so the pages load faster -- gt       lt script src     assets js jquery js  gt  lt  script gt       lt script src     assets js bootstrap-transition js  gt  lt  script gt       lt script src     assets js bootstrap-alert js  gt  lt  script gt       lt script src     assets js bootstrap-modal js  gt  lt  script gt       lt script src     assets js bootstrap-dropdown js  gt  lt  script gt       lt script src     assets js bootstrap-scrollspy js  gt  lt  script gt       lt script src     assets js bootstrap-tab js  gt  lt  script gt       lt script src     assets js bootstrap-tooltip js  gt  lt  script gt       lt script src     assets js bootstrap-popover js  gt  lt  script gt       lt script src     assets js bootstrap-button js  gt  lt  script gt       lt script src     assets js bootstrap-collapse js  gt  lt  script gt       lt script src     assets js bootstrap-carousel js  gt  lt  script gt       lt script src     assets js bootstrap-typeahead js  gt  lt  script gt      lt  body gt   lt  html gt    I can hack this using jQuery  but maybe there is a way of doing it the Bootstrap way  - i e  using the Bootstrap API

User · Answer

html    lt h4 data-toggle-selector   me  gt toggle lt  h4 gt   lt div id  me  gt content here lt  div gt    js     function              data-toggle-selector    on  click  function                  this  data  toggle-selector    toggle 300

User · Answer

It s possible to do this without using extra JS code using the data-collapse and data-target attributes on the a link   e g    lt a class  btn  data-toggle  collapse  data-target   viewdetails  gt View details  amp raquo  lt  a gt    Here s a working example

User · Answer

Based on the doc   lt div class  row  gt       lt div class  span4 collapse-group  gt           lt h2 gt Heading lt  h2 gt           lt p class  collapse  gt Donec id elit non mi porta gravida at eget metus  Fusce dapibus  tellus ac cursus commodo  tortor mauris condimentum nibh  ut fermentum massa justo sit amet risus  Etiam porta sem malesuada magna mollis euismod  Donec sed odio dui   lt  p gt           lt p gt  lt a class  btn  href     gt View details  amp raquo  lt  a gt  lt  p gt       lt  div gt   lt  div gt        row  btn   on  click   function e        e preventDefault        var  this     this       var  collapse    this closest   collapse-group   find   collapse         collapse collapse  toggle          Working demo

User · Answer

I wanted an  quot expand collapse quot  container with a plus and minus button to open and close it   This uses the standard bootstrap event and has animation   This is BS3   HTML   lt button id  quot button quot  type  quot button quot  class  quot btn btn-primary quot     data-toggle  quot collapse quot  data-target  quot  demo quot  gt     lt span class  quot glyphicon glyphicon-collapse-down quot  gt  lt  span gt  Show  lt  button gt    lt div id  quot demo quot  class  quot collapse quot  gt     lt ol class  quot list-group quot  gt         lt li class  quot list-group-item quot  gt Warrior lt  li gt         lt li class  quot list-group-item quot  gt Adventurer lt  li gt         lt li class  quot list-group-item quot  gt Mage lt  li gt     lt  ol gt   lt  div gt   JS    function          demo   on  hide bs collapse   function              button   html   lt span class  quot glyphicon glyphicon-collapse-down quot  gt  lt  span gt  Show               demo   on  show bs collapse   function              button   html   lt span class  quot glyphicon glyphicon-collapse-up quot  gt  lt  span gt  Hide             Example  http   plnkr co edit aG5BtH p preview

User · Answer

Elaborating a bit more on Taylor Gautier s reply  sorry  I dont have enough reputation to add a comment   I d reply to Dean Richardson on how to do what he wanted  without any additional JS code  Pure CSS   You would replace his  btn with the following    lt a class  btn showdetails  data-toggle  collapse  data-target   viewdetails  gt  lt  a gt    And add a small CSS for when the content is displayed    in collapse a btn showdetails before        content  Hide details         collapse a btn showdetails before        content  Show details           Here is his modified example

[javascript] Twitter Bootstrap button click to toggle expand/collapse text section above button

Examples related to javascript

Examples related to jquery

Examples related to css

Examples related to twitter-bootstrap