Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

bootstrap collapse: change display of toggle button icons and text

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:

Demo link

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">
          <span class="glyphicon glyphicon-chevron-down"></span> Open
        </button>
      </h4>
    </div>
    <div id="demo" class="panel-collapse collapse in">
      <div class="panel-body">
        Contents:Thank you to help me solve the problem, you're a great guy!
      </div>
    </div>
  </div>
</div>

Later, i need to change text, button icons and expand.

Is Open:

<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">
  <span class="glyphicon glyphicon-chevron-up"></span> Close
</button>

Is Close:

<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">
  <span class="glyphicon glyphicon-chevron-down"></span> Open
</button>
like image 550
user2823276 Avatar asked Sep 27 '13 12:09

user2823276


People also ask

How do I change the collapse button in Bootstrap?

Just add data-toggle="collapse" and a data-target to the element to automatically assign control of one or more collapsible elements. The data-target attribute accepts a CSS selector to apply the collapse to. Be sure to add the class collapse to the collapsible element.

How do you make a collapsible button appear only in mobile view using Bootstrap?

To create the Bootstrap Collapse Mobile within small displays, just simply put in 2 classes in the <ul> : collapse and navbar-collapse . Through this, you will be able to cause the menu fade away on the smaller display screens. <button class = "navbar-toggle"> button to increase the menu.

Which BS 5 attribute and value is used to create a collapse system?

Generally, we recommend using a button with the data-bs-target attribute. While not recommended from a semantic point of view, you can also use a link with the href attribute (and a role="button" ). In both cases, the data-bs-toggle="collapse" is required.

How do you collapse an accordion by default?

To create an accordion that is collapsed by default, we need to set the 'active' property of the jQuery Accordion as false.


1 Answers

It is also possible to do by css styles.

in css add style:

.text-toogle[aria-expanded=false] .text-expanded {
  display: none;
}
.text-toogle[aria-expanded=true] .text-collapsed {
  display: none;
}

and use in html:

<a class="btn btn-default text-toogle" data-toggle="collapse" data-target="#tabsNavigation" aria-expanded="false">
    <span class="text-collapsed">More info</span>
    <span class="text-expanded">Less info</span>

    <i class="fa fa-angle-right"></i>
</a>

Please remember to add attribute

aria-expanded="false"

and class

text-toogle

to link / button.

like image 68
Paweł Avatar answered Sep 28 '22 06:09

Paweł