Bootstrap Accordion Menu

Overview

Websites are the finest area to feature a highly effective ideas and also beautiful web content in simple and relatively cheap method and have them attainable for the whole world to see and get used to. Will the information you've offered grab viewers's passion and attention-- this stuff we can easily certainly never notice before you really take it live on web server. We have the ability to however presume with a really serious chance of being right the impact of several components over the visitor-- valuing perhaps from our own experience, the excellent techniques illustrated over the net or most commonly-- by the manner a web page affects ourselves as long as we're providing it a shape during the design process. Something is certain yet-- large zones of plain text are very potential to bore the client and also move the customer out-- so just what to try if we simply require to put this kind of greater amount of message-- just like terms and conditions , commonly asked questions, special standards of a goods or else a support service which in turn have to be summarized and exact and so on. Well that is certainly what the development process in itself narrows down at the end-- identifying working treatments-- and we should find a method working this out-- presenting the web content needed in eye-catching and interesting manner nevertheless it could be 3 webpages plain text in length.

A great strategy is covering the content in to the so called Bootstrap Accordion Styles component-- it delivers us a highly effective way to come with just the subtitles of our content clickable and present on page and so typically the entire material is accessible at all times within a compact space-- usually a single display screen with the purpose that the user may quickly click on what is very important and have it enlarged to get familiar with the detailed web content. This specific solution is likewise user-friendly and web format considering that minimal actions need to be taken to continue operating with the webpage and so we keep the site visitor progressed-- type of "push the tab and see the light flashing" stuff.

Exactly how to apply the Bootstrap Accordion List:

Accordion example

Stretch the default collapse behavior to design 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>

Within Bootstrap 4 we obtain the awesome instruments for setting up an accordion simple and quick making use of the recently presented cards components adding just a few special wrapper components. Listed below is the way: To start developing an accordion we first need to have an element in order to wrap the entire thing into-- set up a

<div>

element and delegate it an ID-- something like

id="MyAccordionWrapper"

or so attribute. (read this)

Next it's time to set up the accordion sections-- add in a

.card

element, in it-- a

.card-header

to make the accordion title. In the header-- add in an actual heading such as

h1-- h6

with the

. card-title

class specified and within this particular heading wrap an

<a>

element to definitely bring the headline of the panel. In order to control the collapsing section we are certainly about to establish it should certainly have

data-toggle = "collapse"

attribute, its aim should be the ID of the collapsing component we'll build in a minute just like

data-target = "long-text-1"

as an example and finally-- making certain just one accordion component keeps widened at a time we should in addition provide a

data-parent

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

data-parent = "MyAccordionWrapper"

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

As soon as this is achieved it is undoubtedly the right moment for generating the feature which in turn will stay concealed and hold the current content behind the headline. To perform this we'll wrap a

.card-block

in a

.collapse

element with an ID attribute-- the similar ID we have to place like a goal for the link within the

.card-title

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

id ="long-text-1"

Once this design has been generated you are able to place either the plain text or further wrap your web content setting up a little more complicated system. ( click this link)

Extended material

Repeating the exercise from above you have the ability to add as many elements to your accordion as you want to. And assuming that you desire a information component to showcase developed-- appoint the

.in

.show

classes to it baseding upon the Bootstrap 4 build version you are actually utilizing-- up to Alpha 5 the

.in

class goes and inside of Alpha 6 it gets substituted by

.show

Final thoughts

So primarily that is actually ways you can create an totally working and quite great looking accordion by having the Bootstrap 4 framework. Do note it employs the card feature and cards do expand the entire zone provided by default. In this way incorporated together with the Bootstrap's grid column possibilities you have the ability to simply develop complex interesting formats putting the entire thing inside an element with specified number of columns width.