Bootstrap Accordion Example

Overview

Web pages are the most excellent area to showcase a strong concepts as well as fascinating web content in easy and quite cheap way and get them accessible for the whole world to check out and get used to. Will the web content you've published earn audience's interest and attention-- this we may certainly never know before you really bring it live for server. We can however think with a very great chance of correcting the effect of certain components over the website visitor-- valuing either from our own knowledge, the excellent strategies described over the internet or else most commonly-- by the way a page impacts ourselves in the time we're giving it a form during the construction procedure. Something is clear though-- large zones of clear text are really feasible to bore the customer and also drive the customer out-- so just what to do as soon as we simply just need to set this sort of much larger amount of message-- like conditions and terms , commonly asked questions, practical options of a product line or else a support service which in turn have to be uncovered and exact etc. Well that is actually the things the development procedure itself narrows down in the end-- finding working solutions-- and we should really identify a solution figuring this out-- present the content required in intriguing and appealing way nevertheless it might be 3 pages clear text long.

A cool technique is enclosing the content in to the so called Bootstrap Accordion List feature-- it provides us a powerful way to get just the subtitles of our text clickable and present on web page so commonly the whole material is readily available at all times inside a small space-- frequently a single display with the purpose that the user may easily click on what is essential and have it developed to get acquainted with the detailed information. This approach is actually additionally instinctive and web design considering that small acts ought to be taken to proceed operating with the webpage and so we have the visitor advanced-- type of "push the switch and see the light flashing" thing.

How to utilize the Bootstrap Accordion Group:

Accordion example

Prolong the default collapse behaviour to create 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>

Within Bootstrap 4 we have the great instruments for providing an accordion prompt and convenient using the newly presented cards elements incorporating just a handful of extra wrapper elements. Listed here is the way: To start making an accordion we first require an element in order to wrap all thing within-- develop a

<div>

element and give it an ID-- something like

id="MyAccordionWrapper"

or so attribute. ( get more info)

Next it is without a doubt time to develop the accordion sections-- add a

.card

element, into it-- a

.card-header

to create the accordion caption. In the header-- put in an actual heading like

h1-- h6

with the

. card-title

class selected and within this specific heading wrap an

<a>

element to actually have the headline of the panel. In order to control the collapsing section we're about to generate it should certainly have

data-toggle = "collapse"

attribute, its target should be the ID of the collapsing component we'll build soon like

data-target = "long-text-1"

as an example and at last-- making sure only one accordion element continues to be extended simultaneously we should really likewise provide a

data-parent

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

data-parent = "MyAccordionWrapper"

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

Once this is done it's time for generating the feature which in turn will definitely stay concealed and keep the actual information behind the headline. To perform this we'll wrap a

.card-block

in a

.collapse

element with an ID attribute-- the similar ID we must place serving as a target for the hyperlink within the

.card-title

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

id ="long-text-1"

After this format has been developed you have the ability to apply either the plain text or else extra wrap your web content making a little more complicated structure. ( additional resources)

Expanded information

Repeating the training from above you can certainly add in as many elements to your accordion as you require to. Also assuming that you desire a content feature to showcase expanded-- select the

.in

or possibly

.show

classes to it baseding upon the Bootstrap 4 build version you're using-- up to Alpha 5 the

.in

class proceeds and in Alpha 6 it gets switched out by

.show

Final thoughts

So essentially that's ways you have the ability to create an absolutely functioning and quite good looking accordion having the Bootstrap 4 framework. Do note it uses the card feature and cards do extend the whole space readily available by default. And so combined with the Bootstrap's grid column opportunities you have the ability to conveniently make complex attractive layouts placing the whole thing inside an element with defined quantity of columns width.