Bootstrap Accordion Menu

Introduction

Web pages are the greatest field to present a great concepts and also appealing content in pretty cheap and simple way and get them available for the whole world to check out and get familiar with. Will the material you've shared score customer's passion and attention-- this we can easily never ever know until you really bring it live on web server. We have the ability to however suspect with a relatively great chance of being right the impact of certain components over the website visitor-- reviewing possibly from our unique practical experience, the good strategies described over the web as well as most typically-- by the way a webpage has an effect on ourselves throughout the time we're giving it a design during the designing procedure. One thing is certain though-- great areas of plain text are really probable to bore the client and also drive the customer out-- so what to try when we simply just want to place this sort of bigger amount of text message-- such as conditions and terms , frequently asked questions, technological lists of specifications of a product line or a support service which have to be summarized and exact and so on. Well that's things that the creation procedure in itself narrows down in the end-- discovering working answers-- and we should really identify a method figuring this out-- display the web content needed to have in beautiful and intriguing way nevertheless it might be 3 webpages clear text in length.

A cool technique is cloaking the message into the so called Bootstrap Accordion Menu component-- it delivers us a strong way to have just the subtitles of our content clickable and present on webpage so commonly the entire web content is obtainable at all times inside a small area-- usually a single display so the customer are able to quickly click on what is essential and have it widened to get familiar with the detailed content. This strategy is actually additionally intuitive and web style because small acts ought to be taken to proceed operating with the page and so we have the website visitor advanced-- type of "push the switch and see the light flashing" thing.

Tips on how to make use of the Bootstrap Accordion Table:

Accordion example

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

Within Bootstrap 4 we have the best instruments for producing an accordion simple and fast applying the recently offered cards elements bring in just a handful of extra wrapper components.Here is the way: To begin building an accordion we first really need an element in order to wrap the whole item in-- provide a

<div>

element and give it an ID-- something like

id="MyAccordionWrapper"

or so attribute. ( useful source)

Next it's moment to develop the accordion panels-- put in a

.card

element, inside it-- a

.card-header

to create the accordion caption. Inside the header-- incorporate an original heading such as

h1-- h6

with the

. card-title

class appointed and in this particular headline wrap an

<a>

element to actually have the heading of the panel. For control the collapsing panel we are actually about to build it should certainly have

data-toggle = "collapse"

attribute, its target needs to be the ID of the collapsing feature we'll create in a minute similar to

data-target = "long-text-1"

for instance and finally-- to make sure just one accordion feature stays enlarged at a time we should really at the same time provide a

data-parent

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

data-parent = "MyAccordionWrapper"

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

After this is performed it is without a doubt the right moment for creating the feature that will stay hidden and maintain the actual material behind the heading. To perform this we'll wrap a

.card-block

within a

.collapse

component with an ID attribute-- the identical ID we have to put serving as a target for the web link in the

.card-title

from above-- for the example it should be like

id ="long-text-1"

When this format has been developed you have the ability to set either the plain text or further wrap your material creating a bit more complicated structure. ( find out more)

Enhanced web content

Repeating the practice from above you can surely incorporate as many components to your accordion just as you want to. And if you prefer a material component to present widened-- assign the

.in

or possibly

.show

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

.in

class proceeds and inside of Alpha 6 it becomes removed and replaced by

.show

Final thoughts

So primarily that is definitely how you have the ability to develop an totally functioning and pretty good looking accordion utilizing the Bootstrap 4 framework. Do note it utilizes the card element and cards do extend the whole space readily available by default. In this way merged together with the Bootstrap's grid column solutions you have the ability to simply create complex attractive styles putting the entire thing within an element with specified variety of columns width.