Bootstrap Accordion Example

Introduction

Web pages are the best field to showcase a powerful concepts along with attractive information in easy and really cheap manner and get them attainable for the whole world to discover and get used to. Will the content you've offered earn client's interest and attention-- this stuff we can never notice till you actually bring it live for server. We can however suppose with a really big probability of correcting the influence of various components over the site visitor-- reviewing possibly from our personal prior experience, the excellent strategies identified over the web or else most generally-- by the approach a page influences ourselves throughout the time we're providing it a good shape during the design procedure. Something is sure yet-- large spaces of plain text are pretty possible to bore the user and push the viewers elsewhere-- so what exactly to do when we simply just need to place this type of greater amount of text message-- such as terms and conditions , frequently asked questions, technical lists of specifications of a goods as well as a customer service which in turn need to be specified and exact and so forth. Well that is simply things that the design procedure itself narrows down in the end-- obtaining working options-- and we have to look for a way working this out-- present the web content needed to have in good looking and exciting approach nevertheless it could be 3 webpages plain text long.

A marvelous approach is wrapping the text message within the so called Bootstrap Accordion Styles feature-- it gives us a strong way to get just the explanations of our content clickable and present on webpage so commonly all material is obtainable at all times inside a compact area-- often a single display screen so that the site visitor may quickly click on what is necessary and have it enlarged in order to get acquainted with the detailed content. This specific approach is definitely likewise natural and web style due to the fact that small acts have to be taken to proceed performing with the webpage and so we have the site visitor advanced-- type of "push the tab and see the light flashing" thing.

Exactly how to employ the Bootstrap Accordion Form:

Accordion example

Expand the default collapse behaviour to produce 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 receive the excellent devices for designing an accordion prompt and very easy utilizing the newly provided cards elements including just a couple of additional wrapper elements. Listed below is how: To start making an accordion we initially require an element in order to wrap the entire thing into-- develop a

<div>

element and assign it an ID-- something like

id="MyAccordionWrapper"

or so attribute. ( additional hints)

Next step it is without a doubt the right time to develop the accordion sections-- incorporate a

.card

element, into it-- a

.card-header

to forge the accordion caption. In the header-- add an actual headline like

h1-- h6

with the

. card-title

class specified and within this specific headline wrap an

<a>

element to actually carry the heading of the section. To control the collapsing section we are actually about to establish it should certainly have

data-toggle = "collapse"

attribute, its aim needs to be the ID of the collapsing component we'll establish in a minute similar to

data-target = "long-text-1"

for example and lastly-- making confident only one accordion feature keeps spread out simultaneously we should really in addition add a

data-parent

attribute indicating the master wrapper with regard to the accordion in our case it should be

data-parent = "MyAccordionWrapper"

Some other situation

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

Right after this is performed it is certainly the right moment for building the element which in turn will definitely stay hidden and keep the original content behind the headline. To perform this we'll wrap a

.card-block

within a

.collapse

component with an ID attribute-- the identical ID we should put as a goal for the url within the

.card-title

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

id ="long-text-1"

After this system has been made you can set either the plain text or extra wrap your web content developing a little more complicated system. ( additional reading)

Improved web content

Repeating the practice from above you have the ability to add as many elements to your accordion just as you require to. And also if you would like a material feature to show extended-- specify the

.in

.show

classes to it baseding upon the Bootstrap 4 build version you're working with-- up to Alpha 5 the

.in

class goes and inside of Alpha 6 it gets replaced by

.show

Conclusions

So basically that is definitely the way in which you are able to provide an totally working and very great looking accordion with the Bootstrap 4 framework. Do note it applies the card component and cards do extend the whole zone accessible by default. In this way incorporated together with the Bootstrap's grid column features you have the ability to simply build complex appealing designs placing the whole thing inside an element with defined number of columns width.