Bootstrap Accordion Group

Overview

Website pages are the very best field to feature a powerful concepts along with beautiful material in relatively cheap and simple manner and have them obtainable for the whole world to check out and get familiar with. Will the web content you've offered take client's interest and attention-- this stuff we can easily never discover till you actually deliver it live to hosting server. We have the ability to however guess with a really serious opportunity of being right the impact of several elements over the website visitor-- determining possibly from our personal practical experience, the good strategies defined over the internet as well as most commonly-- by the manner a webpage affects ourselves as long as we're delivering it a design during the construction process. One thing is sure yet-- big zones of clear text are pretty probable to bore the visitor and drive the viewers elsewhere-- so just what to do when we simply require to insert this sort of much larger amount of message-- like conditions and terms , frequently asked questions, technical specifications of a product or else a professional services which need to be specificed and exact and so on. Well that is actually things that the development process in itself narrows down in the end-- discovering working options-- and we should find a solution figuring this one out-- display the material needed in desirable and interesting way nevertheless it could be 3 pages plain text in length.

A cool solution is wrapping the text into the so called Bootstrap Accordion Menu component-- it delivers us a great way to feature just the subtitles of our message present and clickable on webpage so commonly all web content is attainable at all times in a small area-- often a single display so that the user may quickly click on what is essential and have it enlarged to get acquainted with the detailed web content. This particular strategy is definitely additionally intuitive and web design considering that small actions ought to be taken to continue performing with the page and in such manner we have the site visitor progressed-- somewhat "push the switch and see the light flashing" stuff.

The way to use the Bootstrap Accordion Example:

Accordion example

Extend the default collapse behaviour to develop 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>

Inside Bootstrap 4 we have in hand the fantastic devices for setting up an accordion simple and prompt employing the newly provided cards features adding just a few additional wrapper features. Listed below is how: To start building an accordion we first require an element in order to wrap all item in-- develop a

<div>

element and appoint it an ID-- something like

id="MyAccordionWrapper"

or so attribute. ( find more)

Next it is without a doubt moment to establish the accordion panels-- add in a

.card

element, in it-- a

.card-header

to make the accordion title. Inside the header-- add an original heading like

h1-- h6

with the

. card-title

class specified and in this heading wrap an

<a>

element to effectively bring the heading of the section. For control the collapsing panel we are actually about to establish it should certainly have

data-toggle = "collapse"

attribute, its aim needs to be the ID of the collapsing component we'll set up in a minute like

data-target = "long-text-1"

for example and at last-- to make assured only one accordion element stays extended at a time we need to additionally bring in a

data-parent

attribute pointing to the master wrapper with regard to the accordion in our case it must be

data-parent = "MyAccordionWrapper"

An additional representation

<!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 done it is truly the right moment for generating the component that will definitely stay concealed and carry the actual web content behind the heading. To do this we'll wrap a

.card-block

in a

.collapse

component along with an ID attribute-- the very same ID we should insert just as a target for the web link inside the

.card-title

from above-- for the example it should be like

id ="long-text-1"

After this structure has been produced you can put either the clear text or further wrap your content generating a little bit more complicated design. ( discover more here)

Enhanced content

Repeating the drill from above you can certainly put in as many elements to your accordion just as you want to. And supposing that you desire a material element to show widened-- appoint the

.in

.show

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

.in

class goes and within Alpha 6 it gets changed by

.show

Conclusions

So simply speaking that is definitely ways in which you can generate an absolutely working and pretty good looking accordion utilizing the Bootstrap 4 framework. Do note it employs the card feature and cards do extend the entire zone available by default. So merged along with the Bootstrap's grid column features you can simply set up complex beautiful designs placing the entire stuff inside an element with defined number of columns width.