Bootstrap Accordion Menu

Intro

Websites are the greatest area to display a powerful concepts and pleasing content in quite cheap and easy approach and get them provided for the whole world to observe and get used to. Will the information you've published receive customer's passion and attention-- this we can easily never ever notice before you actually deliver it live to web server. We are able to however suspect with a pretty great possibility of being right the efficiency of some elements over the visitor-- reviewing either from our unique prior experience, the great methods illustrated over the web or else most typically-- by the way a page influences ourselves throughout the time we're offering it a good shape during the development procedure. One point is certain though-- huge areas of plain text are very potential to bore the site visitor and drive the visitor away-- so what to do when we simply just want to set this type of much larger amount of message-- like conditions and terms , frequently asked questions, tech options of a material or a professional service which require to be specified and exact and so forth. Well that is really things that the construction procedure itself narrows down in the end-- identifying working treatments-- and we have to uncover a solution working this out-- presenting the material required in beautiful and intriguing approach nevertheless it might be 3 pages plain text in length.

A cool strategy is covering the text into the so called Bootstrap Accordion Form component-- it presents us a great way to have just the captions of our content present and clickable on webpage so normally all content is easily accessible at all times inside a small area-- frequently a single screen with the purpose that the site visitor are able to simply click on what is necessary and have it extended to become familiar with the detailed content. This method is actually as well intuitive and web style given that small actions need to be taken to keep on working with the web page and in this way we keep the website visitor advanced-- somewhat "push the switch and see the light flashing" stuff.

How to work with the Bootstrap Accordion Styles:

Accordion example

Enhance the default collapse activity to generate an Bootstrap Accordion Group.

<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 excellent devices for building an accordion very easy and fast making use of the recently presented cards elements including just a few special wrapper elements. Listed below is how: To start setting up an accordion we first really need an element in order to wrap all thing inside-- provide a

<div>

element and give it an ID-- something like

id="MyAccordionWrapper"

or so attribute. (see page)

Next it is without a doubt about time to build the accordion panels-- include a

.card

element, into it-- a

.card-header

to form the accordion title. Within the header-- provide an actual heading like

h1-- h6

with the

. card-title

class appointed and in this specific heading wrap an

<a>

element to certainly have the heading of the section. For you to control the collapsing panel we are certainly about to create it should have

data-toggle = "collapse"

attribute, its aim needs to be the ID of the collapsing feature we'll generate in a minute such as

data-target = "long-text-1"

for example and at last-- making sure just one accordion component remains extended at once we really should in addition add in a

data-parent

attribute pointing to the master wrapper for the accordion in our good example it must be

data-parent = "MyAccordionWrapper"

One other representation

<!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 without a doubt moment for developing the component which in turn will definitely stay hidden and hold up the actual web content behind the headline. To work on this we'll wrap a

.card-block

in a

.collapse

component with an ID attribute-- the identical ID we must apply serving as a goal for the link within the

.card-title

from above-- for the example it should be like

id ="long-text-1"

When this format has been generated you are able to put either the plain text or else further wrap your content setting up a little bit more complicated form. ( additional info)

Improved material

Repeating the exercise from above you can incorporate as many components to your accordion as you want to. Also if you prefer a web content element to display enlarged-- assign the

.in

.show

classes to it baseding upon the Bootstrap 4 build edition you are actually working with-- up to Alpha 5 the

.in

class goes and inside of Alpha 6 it gets changed by

.show

Final thoughts

So generally that is actually the way you can create an absolutely functioning and very good looking accordion by using the Bootstrap 4 framework. Do note it applies the card element and cards do extend the entire space readily available by default. And so incorporated along with the Bootstrap's grid column solutions you are able to simply create complex pleasing configurations putting the entire stuff inside an element with specified variety of columns width.