Bootstrap Accordion List

Introduction

Website pages are the most excellent field to display a amazing concepts as well as appealing information in quite cheap and easy method and get them available for the whole world to see and get familiar with. Will the content you've posted earn audience's passion and concentration-- this stuff we can never know till you really get it live upon web server. We may however think with a relatively serious possibility of being right the impression of some elements over the website visitor-- determining probably from our own practical experience, the excellent practices illustrated over the internet or most generally-- by the approach a webpage influences ourselves in the time we're providing it a good shape during the creation procedure. One point is sure though-- great fields of plain text are pretty possible to bore the client as well as drive the website visitor out-- so what exactly to try as soon as we simply really need to apply this kind of bigger amount of text message-- such as conditions and terms , commonly asked questions, professional standards of a product or else a customer service which in turn have to be summarized and exact and so on. Well that is really things that the creation process in itself narrows down at the final-- getting working answers-- and we need to uncover a way working this one out-- presenting the content needed in good looking and intriguing way nevertheless it could be 3 web pages clear text in length.

A great strategy is cloaking the content in to the so called Bootstrap Accordion Example element-- it provides us a highly effective way to get just the captions of our message present and clickable on web page and so commonly all web content is attainable at all times inside a small space-- usually a single display so the customer may simply click on what's important and have it developed to become familiar with the detailed content. This kind of solution is definitely as well intuitive and web format because small acts have to be taken to continue functioning with the page and in such manner we keep the website visitor advanced-- somewhat "push the switch and see the light flashing" stuff.

Steps to use the Bootstrap Accordion Group:

Accordion example

Prolong the default collapse activity to set up an Bootstrap Accordion Menu.

<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 obtain the awesome devices for designing an accordion very easy and prompt using the newly delivered cards components adding just a handful of additional wrapper features. Listed below is how: To begin making an accordion we first need to have an element in order to wrap all thing inside-- set up a

<div>

element and assign it an ID-- something like

id="MyAccordionWrapper"

or so attribute. ( helpful hints)

Next step it is undoubtedly the right time to make the accordion sections-- include a

.card

element, inside it-- a

.card-header

to create the accordion headline. Within the header-- provide an actual heading such as

h1-- h6

with the

. card-title

class appointed and inside of this specific heading wrap an

<a>

element to certainly bring the heading of the section. For control the collapsing panel we are really about to make it should have

data-toggle = "collapse"

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

data-target = "long-text-1"

as an example and at last-- making assured only one accordion component keeps widened at once we should really in addition incorporate a

data-parent

attribute pointing to the master wrapper for the accordion in our situation it should be

data-parent = "MyAccordionWrapper"

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

After this is achieved it is truly time for generating the component which in turn is going to stay hidden and keep the current content behind the headline. To carry out this we'll wrap a

.card-block

within a

.collapse

element together with an ID attribute-- the identical ID we have to put like a target for the link in the

.card-title

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

id ="long-text-1"

As soon as this structure has been established you can easily set either the plain text or further wrap your material setting up a little more complex system. ( more info)

Improved content

Repeating the exercise from above you can put in as many components to your accordion as you need to. And assuming that you would like a material component to showcase enlarged-- assign the

.in

.show

classes to it according to the Bootstrap 4 build edition you are actually using-- up to Alpha 5 the

.in

class goes and inside of Alpha 6 it becomes removed and replaced by

.show

Final thoughts

So generally that's ways in which you can easily provide an completely working and quite great looking accordion using the Bootstrap 4 framework. Do note it employs the card component and cards do expand the entire zone readily available by default. So integrated with the Bootstrap's grid column options you may quickly create complex attractive arrangements installing the whole stuff inside an element with defined quantity of columns width.