Bootstrap Accordion List

Overview

Websites are the very best area to feature a highly effective ideas and also beautiful content in pretty cheap and simple manner and get them accessible for the entire world to see and get familiar with. Will the web content you've offered gain viewers's interest and attention-- this stuff we may never ever know until you actually provide it live for hosting server. We can however suspect with a pretty serious opportunity of being right the influence of several elements over the visitor-- judging probably from our individual experience, the excellent strategies defined over the net or most generally-- by the approach a web page influences ourselves as long as we're giving it a good shape during the creation process. One thing is sure though-- huge fields of plain text are very possible to bore the site visitor and also drive the customer elsewhere-- so just what to produce as soon as we simply just want to put such much larger amount of content-- like terms , commonly asked questions, tech lists of specifications of a material or a customer service which have to be revealed and exact and so forth. Well that is certainly the things the development process in itself narrows down at the final-- spotting working resolutions-- and we need to look for a way figuring this one out-- presenting the material required in appealing and interesting manner nevertheless it might be 3 webpages plain text long.

A good technique is covering the message into the so called Bootstrap Accordion Form element-- it presents us a strong way to get just the explanations of our text clickable and present on web page and so commonly all information is attainable at all times within a compact space-- usually a single display screen so that the user may conveniently click on what is necessary and have it expanded to become knowledgeable with the detailed web content. This approach is definitely as well intuitive and web format considering that small activities have to be taken to proceed working with the page and so we have the visitor evolved-- kind of "push the switch and see the light flashing" stuff.

The best ways to make use of the Bootstrap Accordion Menu:

Accordion example

Prolong 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>

Inside Bootstrap 4 we receive the best instruments for providing an accordion fast and very easy applying the recently offered cards elements providing just a couple of extra wrapper features. Listed below is the way: To start setting up an accordion we primarily need to have an element to wrap all item into-- provide a

<div>

element and assign it an ID-- something like

id="MyAccordionWrapper"

or so attribute. ( read here)

Next it is without a doubt the right time to set up the accordion sections-- add in a

.card

element, inside it-- a

.card-header

to make the accordion title. In the header-- bring in an original heading like

h1-- h6

with the

. card-title

class assigned and in this headline wrap an

<a>

element to actually bring the headline of the section. In order to control the collapsing panel we are undoubtedly about to establish it should have

data-toggle = "collapse"

attribute, its goal needs to be the ID of the collapsing element we'll produce in a minute just like

data-target = "long-text-1"

as an example and at last-- to make confident only one accordion feature continues to be expanded at once we really should also add in a

data-parent

attribute leading to the master wrapper with regard to the accordion in our situation it really should be

data-parent = "MyAccordionWrapper"

Yet another scenario

<!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>

When this is done it is definitely time for creating the component which is going to stay hidden and carry the actual information behind the heading. To do this we'll wrap a

.card-block

within a

.collapse

element along with an ID attribute-- the very same ID we must put serving as a target for the link in the

.card-title

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

id ="long-text-1"

When this structure has been created you can set either the plain text or extra wrap your material developing a bit more complicated structure. ( see post)

Expanded content

Repeating the exercise from above you are able to add in as many features to your accordion just as you want to. And in the case that you prefer a content element to show widened-- specify the

.in

or possibly

.show

classes to it baseding upon the Bootstrap 4 build edition you are actually dealing with-- up to Alpha 5 the

.in

class goes and in Alpha 6 it becomes substituted by

.show

Conclusions

So basically that is really ways in which you can easily set up an perfectly working and pretty good looking accordion utilizing the Bootstrap 4 framework. Do note it employs the card feature and cards do expand the entire zone readily available by default. So united along with the Bootstrap's grid column methods you may quickly generate complex attractive formats installing the whole thing within an element with defined quantity of columns width.