Bootstrap Accordion Menu

Introduction

Websites are the most excellent field to feature a effective concepts as well as pleasing material in relatively cheap and simple method and get them attainable for the entire world to watch and get familiar with. Will the information you've posted earn client's passion and attention-- this we may never figure out before you actually bring it live for server. We are able to however suspect with a very big chance of being right the impression of some components over the visitor-- reviewing either from our own knowledge, the good methods explained over the internet or most commonly-- by the approach a web page impacts ourselves while we're delivering it a shape during the design process. One thing is sure though-- great zones of plain text are pretty feasible to bore the customer and also push the viewers elsewhere-- so what exactly to operate in cases where we just need to put this type of bigger amount of content-- for example terms , frequently asked questions, practical lists of specifications of a material as well as a professional services which ought to be described and exact and so on. Well that is really what the style process in itself narrows down in the end-- obtaining working methods-- and we ought to look for a solution figuring this out-- presenting the material needed to have in intriguing and pleasing manner nevertheless it could be 3 web pages clear text prolonged.

A cool method is enclosing the text message within the so called Bootstrap Accordion Group element-- it delivers us a highly effective way to come with just the subtitles of our text message present and clickable on web page so typically the whole material is readily available at all times in a small area-- commonly a single screen so the site visitor can simply click on what is very important and have it enlarged in order to get acquainted with the detailed content. This method is certainly as well instinctive and web design because small actions need to be taken to keep on doing the job with the page and in such manner we have the website visitor advanced-- sort of "push the switch and see the light flashing" thing.

The best way to put into action the Bootstrap Accordion Styles:

Accordion example

Stretch the default collapse behavior to develop an Bootstrap Accordion Example.

<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 fantastic instruments for setting up an accordion simple and prompt utilizing the recently presented cards components providing just a few extra wrapper features.Here is the way: To start building an accordion we initially really need an element to wrap all thing in-- set up a

<div>

element and give it an ID-- something like

id="MyAccordionWrapper"

or so attribute. ( discover more here)

Next step it is without a doubt the right time to make the accordion panels-- include a

.card

element, inside it-- a

.card-header

to create the accordion caption. Inside the header-- bring in an original headline like

h1-- h6

with the

. card-title

class assigned and just within this kind of heading wrap an

<a>

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

data-toggle = "collapse"

attribute, its goal needs to be the ID of the collapsing component we'll generate soon similar to

data-target = "long-text-1"

for example and at last-- to make certain only one accordion feature continues to be widened at a time we should really likewise incorporate a

data-parent

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

data-parent = "MyAccordionWrapper"

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

As soon as this is achieved it is without a doubt the right moment for making the element which will stay hidden and hold the original material behind the heading. To do this we'll wrap a

.card-block

within a

.collapse

component with an ID attribute-- the same ID we should install just as a target for the url in the

.card-title

from above-- for the example it should be like

id ="long-text-1"

When this structure has been established you can easily place either the plain text or extra wrap your web content making a little more complicated system. ( useful content)

Expanded web content

Repeating the drill from above you are able to add as many elements to your accordion as you require to. And if you would like a material feature to showcase developed-- appoint the

.in

.show

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

.in

class proceeds and inside of Alpha 6 it gets changed by

.show

Conclusions

So essentially that is actually how you can easily develop an fully functioning and very great looking accordion utilizing the Bootstrap 4 framework. Do note it uses the card feature and cards do expand the entire zone readily available by default. So united with the Bootstrap's grid column opportunities you may quickly create complex beautiful configurations installing the whole thing inside an element with specified amount of columns width.