Bootstrap Accordion Menu

Overview

Website pages are the best field to showcase a great ideas and fascinating material in simple and pretty cheap manner and get them obtainable for the entire world to check out and get used to. Will the content you've shared grab viewers's interest and concentration-- this stuff we may never know before you really get it live on web server. We have the ability to however suspect with a relatively big opportunity of correcting the influence of some features over the website visitor-- valuing perhaps from our personal prior experience, the great methods described over the web or else most typically-- by the manner a web page has an effect on ourselves during the time we're delivering it a design during the creation procedure. One point is clear though-- large spaces of plain text are really probable to bore the site visitor and push the viewers away-- so exactly what to try as soon as we just desire to apply this kind of larger amount of content-- just like conditions and terms , frequently asked questions, tech standards of a product as well as a customer service which in turn have to be described and exact etc. Well that is simply the things the style procedure in itself narrows down at the end-- spotting working methods-- and we should uncover a way figuring this one out-- display the content needed in eye-catching and fascinating approach nevertheless it could be 3 webpages plain text long.

A great approach is enclosing the content in to the so called Bootstrap Accordion Form component-- it presents us a powerful way to get just the explanations of our message present and clickable on web page so basically all information is available at all times in a compact space-- usually a single display so the user can simply click on what's important and have it developed to get acquainted with the detailed material. This kind of approach is certainly additionally natural and web format considering that small activities ought to be taken to keep on working with the page and in such manner we keep the visitor evolved-- kind of "push the button and see the light flashing" thing.

The best ways to work with the Bootstrap Accordion Table:

Accordion example

Expand the default collapse behavior to develop an Bootstrap Accordion Table.

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

In Bootstrap 4 we have the awesome devices for providing an accordion very easy and fast utilizing the recently provided cards components bring in just a couple of added wrapper features. Listed below is the way: To start building an accordion we initially require an element to wrap all item in-- develop a

<div>

element and assign it an ID-- something like

id="MyAccordionWrapper"

or so attribute. ( read more)

Next it is without a doubt time to build the accordion panels-- add in a

.card

element, into it-- a

.card-header

to develop the accordion caption. Inside the header-- incorporate an actual heading such as

h1-- h6

with the

. card-title

class appointed and just within this specific heading wrap an

<a>

element to definitely have the headline of the panel. To control the collapsing panel we're about to create it should certainly have

data-toggle = "collapse"

attribute, its target should be the ID of the collapsing element we'll generate in a minute similar to

data-target = "long-text-1"

for instance and finally-- to make sure only one accordion component continues to be expanded simultaneously we should additionally add in a

data-parent

attribute indicating the master wrapper for the accordion in our good example it really should be

data-parent = "MyAccordionWrapper"

One more 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>

Right after this is completed it is undoubtedly moment for building the component which will definitely stay concealed and carry the current content behind the heading. To carry out this we'll wrap a

.card-block

inside a

.collapse

element with an ID attribute-- the very same ID we have to insert like a target for the web link inside the

.card-title

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

id ="long-text-1"

After this structure has been developed you have the ability to insert either the plain text or extra wrap your web content developing a bit more complex system. (read this)

Extended material

Repeating the practice from above you are able to incorporate as many elements to your accordion as you require to. Also assuming that you want a material feature to show enlarged-- specify the

.in

.show

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

.in

class goes and within Alpha 6 it becomes replaced by

.show

Final thoughts

So basically that's ways you can generate an totally working and quite excellent looking accordion by using the Bootstrap 4 framework. Do note it utilizes the card element and cards do spread the whole zone available by default. And so mixed along with the Bootstrap's grid column solutions you can simply generate complex pleasing arrangements installing the whole stuff within an element with specified variety of columns width.