Bootstrap Accordion Menu

Introduction

Websites are the very best field to display a powerful concepts as well as attractive material in quite cheap and simple method and have them accessible for the entire world to observe and get used to. Will the web content you've provided receive audience's interest and attention-- this we may never ever figure out till you actually bring it live to server. We are able to however guess with a relatively serious chance of correcting the effect of some components over the website visitor-- reviewing perhaps from our own experience, the excellent practices illustrated over the net or most generally-- by the way a web page impacts ourselves while we're delivering it a design during the development process. One thing is clear though-- large spaces of clear text are really potential to bore the user and also move the website visitor out-- so exactly what to do as soon as we simply desire to set this kind of much larger amount of content-- like conditions and terms , frequently asked questions, practical specifications of a product as well as a support service which have to be detailed and exact etc. Well that is simply the things the style process itself narrows down at the end-- obtaining working solutions-- and we should really discover a method figuring this out-- showcasing the web content needed in appealing and exciting approach nevertheless it might be 3 pages clear text extensive.

A marvelous method is enclosing the text message into the so called Bootstrap Accordion Table feature-- it delivers us a great way to get just the explanations of our text clickable and present on page so normally the entire material is available at all times inside a compact area-- frequently a single display screen so that the user may simply click on what is essential and have it expanded to get knowledgeable with the detailed material. This specific solution is really also natural and web style due to the fact that minimal actions need to be taken to continue functioning with the web page and in this way we have the site visitor advanced-- type of "push the tab and see the light flashing" thing.

The way to employ the Bootstrap Accordion Form:

Accordion example

Extend the default collapse behaviour to generate an Bootstrap Accordion List.

<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 possess the great instruments for creating an accordion convenient and quick employing the newly provided cards elements incorporating just a few special wrapper elements. Listed below is the way: To start setting up an accordion we first require an element in order to wrap all item within-- generate a

<div>

element and give it an ID-- something like

id="MyAccordionWrapper"

or so attribute. ( recommended reading)

Next it's moment to create the accordion panels-- add a

.card

element, into it-- a

.card-header

to form the accordion title. Within the header-- incorporate an original headline such as

h1-- h6

with the

. card-title

class selected and in this kind of headline wrap an

<a>

element to actually bring the headline of the panel. For you to control the collapsing section we are certainly about to establish it should have

data-toggle = "collapse"

attribute, its aim must be the ID of the collapsing feature we'll create soon similar to

data-target = "long-text-1"

for example and at last-- to make certain only one accordion element keeps spread out at once we ought to additionally incorporate a

data-parent

attribute pointing to the master wrapper with regard to the accordion in our example it really should be

data-parent = "MyAccordionWrapper"

Some other case

<!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 accomplished it is definitely time for developing the element which in turn will stay concealed and keep the original information behind the headline. To work on this we'll wrap a

.card-block

within a

.collapse

component with an ID attribute-- the identical ID we should set like a target for the hyperlink within the

.card-title

from above-- for the example it should be like

id ="long-text-1"

Once this design has been made you can easily place either the plain text or else additional wrap your material setting up a little more complex structure. ( useful source)

Improved material

Repeating the training from above you are able to put in as many features to your accordion as you require to. Also in the case that you want a content component to showcase developed-- select the

.in

or possibly

.show

classes to it baseding on the Bootstrap 4 build version you're utilizing-- up to Alpha 5 the

.in

class proceeds and in Alpha 6 it gets changed by

.show

Conclusions

So simply speaking that is definitely the way you can set up an perfectly working and very good looking accordion having the Bootstrap 4 framework. Do note it uses the card component and cards do extend the whole space provided by default. And so united together with the Bootstrap's grid column methods you have the ability to conveniently generate complex attractive layouts putting the whole thing within an element with defined number of columns width.