Bootstrap Accordion Menu

Introduction

Websites are the greatest place to present a highly effective ideas as well as beautiful material in relatively cheap and easy way and get them available for the whole world to observe and get used to. Will the web content you've shared take reader's passion and concentration-- this stuff we may never discover before you actually deliver it live to hosting server. We can however think with a very great probability of being right the impression of certain components over the visitor-- valuing either from our personal experience, the good strategies identified over the web as well as most typically-- by the way a web page has an effect on ourselves in the time we're offering it a good shape during the construction process. One thing is sure yet-- big fields of clear text are really potential to bore the user as well as push the website visitor out-- so what to produce in cases where we simply need to apply this kind of greater amount of message-- just like conditions and terms , commonly asked questions, tech standards of a goods or a service which in turn have to be revealed and exact and so on. Well that is definitely the things the design process itself narrows down at the end-- getting working options-- and we have to find a method figuring this out-- presenting the material required in appealing and intriguing approach nevertheless it could be 3 pages clear text long.

A marvelous solution is enclosing the text message in to the so called Bootstrap Accordion Example component-- it offers us a powerful way to come with just the captions of our text clickable and present on web page and so generally the whole content is attainable at all times inside a small area-- usually a single display so that the visitor are able to quickly click on what's important and have it widened in order to get acquainted with the detailed web content. This particular strategy is actually likewise natural and web design because small acts have to be taken to proceed functioning with the page and in this way we make the site visitor progressed-- kind of "push the button and see the light flashing" stuff.

How you can apply the Bootstrap Accordion Styles:

Accordion example

Enhance the default collapse activity to set up an Bootstrap Accordion Group.

<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 have the fantastic tools for creating an accordion quick and easy applying the recently provided cards elements incorporating just a handful of special wrapper features.Here is the way: To begin developing an accordion we initially require an element to wrap the whole thing within-- develop a

<div>

element and assign it an ID-- something like

id="MyAccordionWrapper"

or so attribute. ( useful content)

Next step it's point to create the accordion panels-- include a

.card

element, in it-- a

.card-header

to make the accordion title. Within the header-- add in an original headline like

h1-- h6

with the

. card-title

class specified and inside of this kind of headline wrap an

<a>

element to effectively have the heading of the panel. To control the collapsing panel we're about to build it should certainly have

data-toggle = "collapse"

attribute, its target needs to be the ID of the collapsing component we'll produce soon just like

data-target = "long-text-1"

for example and at last-- making certain only one accordion component keeps enlarged at a time we must additionally incorporate a

data-parent

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

data-parent = "MyAccordionWrapper"

A different 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>

When this is completed it's time for developing the element which in turn is going to stay hidden and keep the current web content behind the headline. To perform this we'll wrap a

.card-block

inside a

.collapse

element along with an ID attribute-- the identical ID we should install just as a target for the url in the

.card-title

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

id ="long-text-1"

Once this design has been developed you can place either the clear text or else further wrap your web content generating a bit more complex form. ( useful source)

Enhanced content

Repeating the practice from above you can certainly bring in as many elements to your accordion just as you want to. And supposing that you want a material component to display enlarged-- specify the

.in

.show

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

.in

class proceeds and inside of Alpha 6 it gets changed by

.show

Final thoughts

So generally that is definitely the way you can set up an totally working and very good looking accordion by using the Bootstrap 4 framework. Do note it employs the card element and cards do expand the entire zone provided by default. So integrated together with the Bootstrap's grid column options you have the ability to easily make complex interesting formats setting the whole thing within an element with specified quantity of columns width.