Bootstrap Accordion Menu

Overview

Website pages are the very best field to show a strong concepts and also appealing web content in relatively cheap and simple approach and get them provided for the entire world to discover and get used to. Will the material you've offered grab audience's passion and attention-- this we can easily never ever know till you actually get it live on web server. We have the ability to however suppose with a pretty big opportunity of being right the effect of some elements over the website visitor-- reviewing either from our personal knowledge, the great strategies identified over the net as well as most generally-- by the manner a webpage affects ourselves during the time we're offering it a shape during the design procedure. One thing is certain though-- great fields of clear text are very possible to bore the visitor as well as drive the customer away-- so what to do as soon as we simply want to set this kind of greater amount of text message-- such as conditions and terms , commonly asked questions, technological options of a goods as well as a customer service which ought to be detailed and exact and so forth. Well that is really things that the style process itself narrows down in the end-- spotting working treatments-- and we should really uncover a solution figuring this one out-- feature the material needed to have in helpful and attractive approach nevertheless it might be 3 web pages plain text prolonged.

A good method is cloaking the message in to the so called Bootstrap Accordion Table feature-- it offers us a strong way to get just the subtitles of our content clickable and present on page and so basically the whole web content is available at all times within a compact area-- commonly a single screen so that the visitor are able to simply click on what's important and have it extended in order to get familiar with the detailed web content. This particular strategy is in addition user-friendly and web design because minimal actions ought to be taken to keep on functioning with the web page and in such manner we make the website visitor evolved-- sort of "push the button and see the light flashing" stuff.

Steps to make use of the Bootstrap Accordion List:

Accordion example

Expand the default collapse behavior to make an Bootstrap Accordion Styles.

<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 best tools for providing an accordion prompt and convenient making use of the recently provided cards features including just a handful of special wrapper components.Here is the way: To start building an accordion we first really need an element to wrap the entire thing inside-- create a

<div>

element and appoint it an ID-- something like

id="MyAccordionWrapper"

or so attribute. ( learn more here)

Next step it is without a doubt the right time to create the accordion panels-- add in a

.card

element, in it-- a

.card-header

to form the accordion headline. In the header-- add in an original headline like

h1-- h6

with the

. card-title

class specified and inside of this particular headline wrap an

<a>

element to certainly have the headline of the section. For you to control the collapsing section we are really about to develop it should certainly have

data-toggle = "collapse"

attribute, its aim must be the ID of the collapsing feature we'll set up in a minute like

data-target = "long-text-1"

for instance and lastly-- to make sure just one accordion component continues to be spread out at a time we really should in addition incorporate a

data-parent

attribute indicating the master wrapper for the accordion in our case it should be

data-parent = "MyAccordionWrapper"

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>

As soon as this is completed it is undoubtedly moment for making the feature which will certainly stay hidden and maintain the current web content behind the headline. To perform this we'll wrap a

.card-block

within a

.collapse

component along with an ID attribute-- the very same ID we should apply just as a goal for the web link within the

.card-title

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

id ="long-text-1"

When this format has been created you can put either the plain text or else further wrap your material creating a bit more complicated design. ( find more)

Enhanced material

Repeating the drill from above you can surely put in as many components to your accordion as you want to. Also in the case that you desire a information element to showcase widened-- assign the

.in

.show

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

.in

class proceeds and in Alpha 6 it gets replaced by

.show

Conclusions

So generally that is definitely ways you can develop an absolutely working and quite great looking accordion with the Bootstrap 4 framework. Do note it applies the card feature and cards do extend the entire zone readily available by default. And so combined with the Bootstrap's grid column possibilities you may conveniently build complex eye-catching layouts installing the whole thing within an element with defined amount of columns width.