Bootstrap Accordion Menu

Overview

Web pages are the finest area to present a impressive ideas as well as pleasing content in quite cheap and easy approach and have them obtainable for the whole world to observe and get used to. Will the content you've shared get reader's interest and attention-- this we can easily never ever know till you actually take it live to hosting server. We can however presume with a very great probability of correcting the efficiency of certain features over the visitor-- judging either from our individual knowledge, the great methods defined over the web as well as most commonly-- by the approach a webpage impacts ourselves while we're providing it a form during the development procedure. One point is clear though-- great fields of plain text are very potential to bore the customer and push the visitor away-- so just what to do in cases where we just want to place this type of much larger amount of content-- just like terms , frequently asked questions, professional standards of a product line or a service which need to be specified and exact and so forth. Well that's what the development process in itself narrows down in the end-- identifying working options-- and we should really look for a solution figuring this out-- presenting the web content needed to have in desirable and interesting way nevertheless it could be 3 webpages clear text extensive.

A great solution is enclosing the message in to the so called Bootstrap Accordion Example component-- it delivers us a great way to provide just the subtitles of our text message clickable and present on webpage and so generally all information is readily available at all times within a small area-- often a single screen so the user may simply click on what's important and have it expanded in order to get familiar with the detailed information. This strategy is actually also intuitive and web style since minimal acts ought to be taken to proceed operating with the webpage and in this way we keep the site visitor evolved-- somewhat "push the button and see the light flashing" stuff.

Efficient ways to employ the Bootstrap Accordion Menu:

Accordion example

Enhance the default collapse behaviour to produce 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 prompt employing the newly offered cards components providing just a handful of extra wrapper elements. Listed below is how: To start building an accordion we primarily require an element in order to wrap all item in-- provide a

<div>

element and assign it an ID-- something like

id="MyAccordionWrapper"

or so attribute. ( useful content)

Next step it's moment to establish the accordion panels-- add in a

.card

element, in it-- a

.card-header

to create the accordion caption. Inside the header-- provide an actual headline such as

h1-- h6

with the

. card-title

class appointed and inside of this heading wrap an

<a>

element to definitely carry the heading of the section. For you to control the collapsing section we are definitely about to create it really should have

data-toggle = "collapse"

attribute, its aim should be the ID of the collapsing component we'll make soon just like

data-target = "long-text-1"

as an example and lastly-- making certain only one accordion component stays extended at once we really should at the same time incorporate a

data-parent

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

data-parent = "MyAccordionWrapper"

Yet another case

<!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 is certainly the right moment for creating the feature that is going to stay concealed and hold the current information behind the heading. To do this we'll wrap a

.card-block

inside a

.collapse

element along with an ID attribute-- the similar 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"

After this design has been generated you have the ability to put either the clear text or else additional wrap your material generating a little bit more complicated design. (see page)

Expanded information

Repeating the drill from above you are able to add as many components to your accordion just as you want to. Also assuming that you would like a web content element to show widened-- specify the

.in

.show

classes to it according to the Bootstrap 4 build version you're dealing with-- up to Alpha 5 the

.in

class goes and inside of Alpha 6 it gets switched out by

.show

Conclusions

So generally that is really the way in which you are able to generate an absolutely working and very good looking accordion by having the Bootstrap 4 framework. Do note it utilizes the card feature and cards do expand the entire space accessible by default. And so incorporated together with the Bootstrap's grid column possibilities you can easily make complex pleasing designs inserting the whole stuff within an element with defined variety of columns width.