Bootstrap Accordion Group

Intro

Websites are the most excellent place to show a amazing ideas and also beautiful information in quite cheap and easy method and have them accessible for the entire world to see and get familiar with. Will the content you've posted gain viewers's passion and concentration-- this we can easily certainly never notice until you actually take it live to server. We may however suspect with a pretty serious opportunity of being right the impression of various elements over the visitor-- judging probably from our personal practical experience, the excellent techniques illustrated over the internet or most generally-- by the way a webpage impacts ourselves throughout the time we're delivering it a form during the designing process. One point is sure though-- big fields of clear text are pretty possible to bore the user and also push the site visitor elsewhere-- so what to do when we simply just need to insert this kind of much bigger amount of text message-- such as conditions and terms , commonly asked questions, professional options of a product line or a professional services which in turn require to be specified and exact and so on. Well that's what the construction process in itself narrows down at the final-- spotting working resolutions-- and we ought to discover a solution figuring this one out-- feature the material needed in interesting and attractive way nevertheless it could be 3 pages plain text prolonged.

A great strategy is wrapping the message into the so called Bootstrap Accordion Table component-- it supplies us a powerful way to come with just the captions of our text clickable and present on web page so commonly the entire web content is available at all times inside a compact space-- usually a single display so that the customer are able to conveniently click on what is very important and have it enlarged to get familiar with the detailed web content. This particular strategy is certainly in addition intuitive and web style due to the fact that minimal activities ought to be taken to continue working with the page and in such manner we make the visitor evolved-- kind of "push the button and see the light flashing" stuff.

The best ways to work with the Bootstrap Accordion Menu:

Accordion example

Stretch the default collapse activity to design an Bootstrap Accordion Menu.

<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 in hand the awesome tools for creating an accordion easy and fast utilizing the newly provided cards components providing just a handful of additional wrapper features.Here is the way: To begin developing an accordion we initially need to have an element in order to wrap all item into-- develop a

<div>

element and delegate it an ID-- something like

id="MyAccordionWrapper"

or so attribute. ( additional resources)

Next step it's the right time to create the accordion panels-- put in a

.card

element, inside it-- a

.card-header

to develop the accordion title. Inside the header-- bring in an original heading like

h1-- h6

with the

. card-title

class specified and just within this headline wrap an

<a>

element to certainly have the headline of the section. If you want to control the collapsing section we are certainly about to create it should certainly have

data-toggle = "collapse"

attribute, its target must be the ID of the collapsing element we'll create in a minute such as

data-target = "long-text-1"

as an example and lastly-- making confident just one accordion element continues to be widened at once we really should also add in a

data-parent

attribute pointing to the master wrapper with regard to the accordion in our situation it really should be

data-parent = "MyAccordionWrapper"

An additional situation

<!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 performed it is definitely moment for making the element which is going to stay hidden and maintain the original information behind the heading. To work on this we'll wrap a

.card-block

in a

.collapse

component with an ID attribute-- the same ID we have to insert like a goal for the url within the

.card-title

from above-- for the example it should be like

id ="long-text-1"

Once this design has been generated you can certainly set either the clear text or else extra wrap your material developing a bit more complicated structure. ( discover more)

Extended information

Repeating the practice from above you can surely put in as many components to your accordion just as you need to. And supposing that you would like a information component to show expanded-- select the

.in

or possibly

.show

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

.in

class goes and in Alpha 6 it becomes removed and replaced by

.show

Final thoughts

So primarily that is definitely the way in which you have the ability to develop an perfectly functioning and pretty good looking accordion through the Bootstrap 4 framework. Do note it uses the card element and cards do extend the entire zone provided by default. And so combined with the Bootstrap's grid column methods you have the ability to conveniently create complex pleasing layouts placing the entire thing within an element with defined quantity of columns width.