Bootstrap Accordion Group

Overview

Website pages are the most popular area to present a highly effective ideas along with pleasing information in relatively cheap and simple method and have them provided for the entire world to observe and get familiar with. Will the material you've offered take customer's interest and concentration-- this we can certainly never notice before you really provide it live upon server. We may however suppose with a pretty great possibility of being right the influence of some components over the visitor-- determining perhaps from our individual prior experience, the excellent strategies defined over the web as well as most commonly-- by the manner a web page impacts ourselves while we're giving it a form during the construction procedure. One thing is certain though-- large fields of clear text are pretty probable to bore the visitor as well as push the site visitor out-- so just what to operate when we simply desire to place such bigger amount of content-- like conditions and terms , frequently asked questions, tech options of a goods or else a professional services which require to be revealed and exact and so forth. Well that is really things that the construction process in itself narrows down at the final-- spotting working solutions-- and we should discover a solution working this one out-- display the web content required in fascinating and wonderful manner nevertheless it might be 3 pages clear text prolonged.

A good method is cloaking the text message into the so called Bootstrap Accordion Table element-- it delivers us a powerful way to come with just the explanations of our text message clickable and present on webpage and so normally the entire information is attainable at all times within a small space-- usually a single display so the customer may conveniently click on what is very important and have it expanded to get acquainted with the detailed web content. This kind of method is definitely likewise instinctive and web design considering that small actions have to be taken to proceed performing with the web page and in such manner we make the site visitor advanced-- sort of "push the button and see the light flashing" thing.

How to work with the Bootstrap Accordion Table:

Accordion example

Expand the default collapse behavior to design 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>

Inside Bootstrap 4 we receive the great tools for developing an accordion fast and very easy using the recently provided cards features incorporating just a handful of extra wrapper components. Listed below is how: To start setting up an accordion we primarily need to have an element to wrap the whole item within-- generate a

<div>

element and appoint it an ID-- something like

id="MyAccordionWrapper"

or so attribute. ( read this)

Next it is without a doubt moment to establish the accordion sections-- bring in a

.card

element, in it-- a

.card-header

to develop the accordion title. Within the header-- provide an original heading like

h1-- h6

with the

. card-title

class appointed and in this kind of heading wrap an

<a>

element to certainly carry the heading of the section. For control the collapsing section we are certainly about to make it should have

data-toggle = "collapse"

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

data-target = "long-text-1"

for example and at last-- making assured only one accordion feature continues to be enlarged simultaneously we need to also incorporate a

data-parent

attribute pointing to the master wrapper for the accordion in our example it must 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>

After this is achieved it is undoubtedly the right moment for creating the feature which in turn is going to stay hidden and maintain the current content behind the headline. To work on this we'll wrap a

.card-block

inside a

.collapse

component along with an ID attribute-- the identical ID we have to place like a target for the link inside the

.card-title

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

id ="long-text-1"

After this format has been set up you are able to set either the clear text or additional wrap your content making a bit more complicated design. ( find more)

Expanded web content

Repeating the exercise from above you have the ability to provide as many features to your accordion just as you require to. And also supposing that you want a web content feature to show enlarged-- appoint the

.in

.show

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

.in

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

.show

Conclusions

So simply speaking that is definitely ways you are able to create an absolutely working and very excellent looking accordion using the Bootstrap 4 framework. Do note it uses the card element and cards do expand the entire zone provided by default. In this way mixed with the Bootstrap's grid column opportunities you have the ability to quickly make complex attractive arrangements installing the whole stuff inside an element with specified number of columns width.