Bootstrap Accordion Example

Intro

Websites are the best field to show a impressive ideas as well as attractive material in simple and quite cheap approach and have them provided for the whole world to watch and get familiar with. Will the content you've posted receive customer's interest and attention-- this we can easily never notice till you really deliver it live to server. We can however presume with a really great probability of being right the influence of several components over the site visitor-- judging either from our personal practical experience, the excellent strategies illustrated over the web or most commonly-- by the manner a web page influences ourselves as long as we're offering it a form during the designing process. One point is sure though-- big spaces of plain text are really possible to bore the customer plus move the customer out-- so what exactly to operate in cases where we simply desire to apply such larger amount of text message-- just like conditions and terms , frequently asked questions, technical standards of a product line as well as a support service which in turn have to be described and exact and so on. Well that is really things that the creation process itself narrows down in the end-- finding working treatments-- and we have to look for a solution working this out-- showcasing the material needed in fascinating and desirable manner nevertheless it might be 3 webpages plain text long.

A marvelous solution is cloaking the text into the so called Bootstrap Accordion Menu component-- it presents us a strong way to come with just the captions of our content present and clickable on webpage so generally the entire information is readily available at all times inside a compact space-- often a single display screen so the site visitor are able to conveniently click on what is necessary and have it expanded to become acquainted with the detailed information. This specific method is also natural and web style given that minimal actions need to be taken to continue performing with the web page and so we make the visitor advanced-- sort of "push the switch and see the light flashing" thing.

The best ways to utilize the Bootstrap Accordion Menu:

Accordion example

Extend the default collapse behaviour to set up an Bootstrap Accordion Group.

<div id="accordion" role="tablist" aria-multiselectable="true">
  <div class="card">
    <div class="card-header" role="tab" id="headingOne">
      <h5 class="mb-0">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h5>
    </div>

    <div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne">
      <div class="card-block">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" role="tab" id="headingTwo">
      <h5 class="mb-0">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="card-block">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" role="tab" id="headingThree">
      <h5 class="mb-0">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </a>
      </h5>
    </div>
    <div id="collapseThree" class="collapse" role="tabpanel" aria-labelledby="headingThree">
      <div class="card-block">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

Within Bootstrap 4 we receive the fantastic devices for building an accordion fast and convenient making use of the newly delivered cards features bring in just a couple of extra wrapper components. Listed here is the way: To begin building an accordion we primarily really need an element in order to wrap all item in-- set up a

<div>

element and appoint it an ID-- something like

id="MyAccordionWrapper"

or so attribute. ( recommended reading)

Next step it is undoubtedly about time to develop the accordion sections-- incorporate a

.card

element, in it-- a

.card-header

to forge the accordion headline. In the header-- incorporate an actual headline such as

h1-- h6

with the

. card-title

class specified and just within this particular heading wrap an

<a>

element to certainly carry the headline of the panel. In order to control the collapsing section we are actually about to build it really should have

data-toggle = "collapse"

attribute, its target should be the ID of the collapsing component we'll build in a minute such as

data-target = "long-text-1"

for example and finally-- making confident just one accordion feature stays widened simultaneously we must also add in a

data-parent

attribute leading to the master wrapper for the accordion in our example it should be

data-parent = "MyAccordionWrapper"

A different good example

<!DOCTYPE html>
<title>My Example</title>

<!-- Bootstrap 4 alpha CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" integrity="sha384-2hfp1SzUoho7/TsGGGDaFdsuuDL0LX2hnUp6VkX3CUQ2K4K+xjboZdsXyp4oUHZj" crossorigin="anonymous">
<style>
body 
padding-top: 1em;
 
</style>
<div class="container-fluid">
    
<div id="faq" role="tablist" aria-multiselectable="true">

<div class="card">
<div class="card-header" role="tab" id="questionOne">
<h5 class="card-title">
<a data-toggle="collapse" data-parent="#faq" href="#answerOne" aria-expanded="false" aria-controls="answerOne">
What if my boots are too big for my feet?
</a>
</h5>
</div>
<div id="answerOne" class="collapse" role="tabcard" aria-labelledby="questionOne">
<div class="card-block">
Stuff your boots with newspaper or tissue.
</div>
</div>
</div>

<div class="card">
<div class="card-header" role="tab" id="questionTwo">
<h5 class="card-title">
<a class="collapsed" data-toggle="collapse" data-parent="#faq" href="#answerTwo" aria-expanded="false" aria-controls="answerTwo">
Can I wear my boots inside?
</a>
</h5>
</div>
<div id="answerTwo" class="collapse" role="tabcard" aria-labelledby="questionTwo">
<div class="card-block">
No. Your mama should've told you about this.
</div>
</div>
</div>

<div class="card">
<div class="card-header" role="tab" id="questionThree">
<h5 class="card-title">
<a class="collapsed" data-toggle="collapse" data-parent="#faq" href="#answerThree" aria-expanded="true" aria-controls="answerThree">
What if my boots get slippery when wet?
</a>
</h5>
</div>
<div id="answerThree" class="collapse in" role="tabcard" aria-labelledby="questionThree">
<div class="card-block">
Keep your boots dry.
</div>
</div>
</div>

</div>

</div>
    
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script>

<!-- Tether -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script>

<!-- Bootstrap 4 Alpha JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/js/bootstrap.min.js" integrity="sha384-VjEeINv9OSwtWFLAtmc4JCtEJXXBub00gtSnszmspDLCtC0I4z4nqz7rEFbIZLLU" crossorigin="anonymous"></script>

<!-- Initialize Bootstrap functionality -->
<script>
// Initialize tooltip component
$(function () 
  $('[data-toggle="tooltip"]').tooltip()
)

// Initialize popover component
$(function () 
  $('[data-toggle="popover"]').popover()
)
</script>

Once this is performed it is truly time for designing the component that is going to stay concealed and maintain the current material behind the heading. To carry out this we'll wrap a

.card-block

within a

.collapse

component along with an ID attribute-- the identical ID we should put like a target for the web link in the

.card-title

from above-- for the example it really should be just like

id ="long-text-1"

After this structure has been established you can certainly set either the clear text or else further wrap your content generating a little bit more complicated form. ( learn more)

Enhanced material

Repeating the practice from above you can put in as many components to your accordion as you require to. And also supposing that you want a web content feature to showcase developed-- appoint the

.in

or possibly

.show

classes to it inning accordance with the Bootstrap 4 build version you are actually utilizing-- up to Alpha 5 the

.in

class goes and within Alpha 6 it gets replaced by

.show

Conclusions

So generally that is definitely the way in which you are able to deliver an completely functioning and very good looking accordion through the Bootstrap 4 framework. Do note it utilizes the card feature and cards do spread the entire space available by default. So integrated with the Bootstrap's grid column methods you are able to easily develop complex wonderful styles placing the entire thing inside an element with defined variety of columns width.