Bootstrap Accordion Menu

Intro

Web pages are the finest field to showcase a strong ideas and also beautiful material in simple and really cheap approach and have them accessible for the whole world to see and get used to. Will the information you've provided score client's passion and concentration-- this we may never ever notice till you actually bring it live to server. We can however presume with a pretty serious probability of correcting the influence of various components over the website visitor-- determining perhaps from our unique prior experience, the excellent techniques identified over the internet or most generally-- by the manner a webpage has an effect on ourselves throughout the time we're providing it a design during the design procedure. One point is certain yet-- big spaces of plain text are pretty possible to bore the visitor as well as drive the visitor away-- so what exactly to produce when we simply just really need to set this type of larger amount of content-- such as terms and conditions , frequently asked questions, practical options of a material or a customer service which need to be uncovered and exact and so on. Well that is really the things the creation process in itself narrows down in the end-- identifying working answers-- and we need to look for a way figuring this out-- showcasing the material needed in exciting and appealing way nevertheless it might be 3 web pages plain text long.

A good approach is enclosing the text into the so called Bootstrap Accordion Form component-- it gives us a powerful way to provide just the subtitles of our message clickable and present on webpage and so generally the whole information is readily available at all times in a small area-- usually a single display with the purpose that the site visitor are able to easily click on what is very important and have it enlarged to get acquainted with the detailed information. This specific strategy is likewise intuitive and web design considering that minimal actions ought to be taken to continue performing with the web page and so we have the site visitor advanced-- sort of "push the button and see the light flashing" stuff.

Efficient ways to employ the Bootstrap Accordion List:

Accordion example

Enhance the default collapse behavior to make 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>

In Bootstrap 4 we obtain the ideal instruments for generating an accordion quick and convenient utilizing the recently delivered cards features bring in just a handful of additional wrapper components. Listed below is how: To start generating an accordion we primarily really need an element in order to wrap the whole thing into-- make a

<div>

element and assign it an ID-- something like

id="MyAccordionWrapper"

or so attribute. ( get more info)

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

.card

element, inside it-- a

.card-header

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

h1-- h6

with the

. card-title

class assigned and inside of this headline wrap an

<a>

element to definitely bring the headline of the section. To control the collapsing panel we are undoubtedly about to establish it should have

data-toggle = "collapse"

attribute, its target must be the ID of the collapsing element we'll build soon just like

data-target = "long-text-1"

for instance and finally-- making sure only one accordion element continues to be enlarged at a time we should at the same time add in a

data-parent

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

data-parent = "MyAccordionWrapper"

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

When this is performed it is definitely moment for generating the element which in turn will stay concealed and maintain the current information behind the heading. To do this we'll wrap a

.card-block

within a

.collapse

component with an ID attribute-- the identical ID we must insert serving as a target for the hyperlink inside the

.card-title

from above-- for the example it should be like

id ="long-text-1"

After this design has been generated you can certainly put either the clear text or else additional wrap your material making a little bit more complex form. ( click here)

Improved content

Repeating the drill from above you can surely add in as many features to your accordion just as you require to. And also supposing that you desire a web content component to show expanded-- appoint the

.in

.show

classes to it inning accordance with the Bootstrap 4 build version you are actually utilizing-- up to Alpha 5 the

.in

class proceeds and inside of Alpha 6 it gets changed by

.show

Conclusions

So simply speaking that is definitely the way in which you can deliver an completely working and quite good looking accordion by using the Bootstrap 4 framework. Do note it utilizes the card feature and cards do spread the entire space accessible by default. And so united together with the Bootstrap's grid column opportunities you may easily create complex attractive arrangements inserting the whole stuff inside an element with defined quantity of columns width.