Bootstrap Accordion Menu

Overview

Websites are the most excellent area to display a great concepts and amazing content in simple and quite cheap method and get them accessible for the whole world to discover and get familiar with. Will the content you've published score customer's interest and attention-- this stuff we can easily never figure out before you really bring it live to server. We may however presume with a very great chance of being right the effect of various elements over the website visitor-- judging either from our unique knowledge, the excellent practices defined over the web or else most commonly-- by the way a webpage influences ourselves during the time we're delivering it a form during the development procedure. Something is certain yet-- great zones of clear text are very feasible to bore the site visitor as well as move the visitor away-- so what exactly to do when we just wish to place this type of greater amount of text message-- for example terms , commonly asked questions, tech specifications of a product line or else a support service which have to be revealed and exact and so on. Well that's the things the design process itself narrows down at the final-- identifying working options-- and we should really look for a way figuring this out-- display the web content needed to have in helpful and pleasing manner nevertheless it might be 3 web pages plain text in length.

A great strategy is wrapping the content in to the so called Bootstrap Accordion Table feature-- it delivers us a highly effective way to have just the captions of our message present and clickable on web page so normally the entire material is accessible at all times inside a compact area-- usually a single display so that the visitor may conveniently click on what's important and have it widened in order to get acquainted with the detailed material. This specific method is really as well intuitive and web design because small acts ought to be taken to continue functioning with the webpage and in this way we have the visitor progressed-- type of "push the switch and see the light flashing" stuff.

Effective ways to put into action the Bootstrap Accordion Example:

Accordion example

Extend the default collapse activity to generate 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>

Inside Bootstrap 4 we possess the perfect instruments for making an accordion prompt and easy applying the recently provided cards features including just a few special wrapper features. Listed below is how: To start producing an accordion we first need to have an element to wrap all thing in-- create a

<div>

element and appoint it an ID-- something like

id="MyAccordionWrapper"

or so attribute. ( get more info)

Next it is undoubtedly the right time to set up the accordion panels-- add a

.card

element, inside it-- a

.card-header

to forge the accordion title. In the header-- add in an original headline such as

h1-- h6

with the

. card-title

class selected and inside of this specific headline wrap an

<a>

element to definitely carry the headline of the panel. For you to control the collapsing panel we are undoubtedly about to set up it should certainly have

data-toggle = "collapse"

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

data-target = "long-text-1"

for example and lastly-- to make sure only one accordion feature remains widened at once we ought to also bring in a

data-parent

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

data-parent = "MyAccordionWrapper"

Yet another scenario

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

Once this is performed it is definitely time for generating the feature which in turn will certainly stay concealed and hold the original information behind the headline. To carry out this we'll wrap a

.card-block

within a

.collapse

element with an ID attribute-- the identical ID we should install serving as a goal for the url within the

.card-title

from above-- for the example it should be like

id ="long-text-1"

Once this format has been produced you can certainly put either the plain text or else extra wrap your material making a little bit more complex system. ( get more information)

Improved content

Repeating the exercise from above you can put in as many components to your accordion as you require to. And also in the case that you want a web content component to present enlarged-- specify the

.in

or possibly

.show

classes to it baseding upon the Bootstrap 4 build edition you're dealing with-- up to Alpha 5 the

.in

class goes and within Alpha 6 it becomes substituted by

.show

Final thoughts

So generally that's the way in which you are able to set up an completely functioning and quite great looking accordion by having the Bootstrap 4 framework. Do note it uses the card component and cards do extend the whole space available by default. And so combined along with the Bootstrap's grid column opportunities you have the ability to quickly generate complex interesting configurations inserting the entire thing within an element with specified number of columns width.