Bootstrap Accordion List

Overview

Web pages are the greatest place to showcase a powerful concepts and also appealing content in simple and relatively cheap way and get them provided for the whole world to observe and get used to. Will the content you've posted gain audience's passion and concentration-- this stuff we can certainly never find out until you really take it live on hosting server. We are able to however think with a really big possibility of correcting the efficiency of several features over the site visitor-- reviewing probably from our personal prior experience, the good practices described over the internet as well as most commonly-- by the manner a webpage affects ourselves while we're offering it a form during the creation procedure. One thing is sure yet-- large fields of plain text are pretty possible to bore the customer plus move the site visitor out-- so what to do if we just really need to insert this kind of larger amount of text-- such as conditions and terms , frequently asked questions, tech standards of a material or a customer service which need to be specified and exact etc. Well that is certainly the things the style procedure in itself narrows down in the end-- identifying working options-- and we have to find a method working this out-- present the content needed to have in good looking and fascinating manner nevertheless it could be 3 webpages plain text in length.

A good approach is wrapping the text message in to the so called Bootstrap Accordion Example component-- it presents us a highly effective way to get just the subtitles of our text message present and clickable on webpage and so generally the whole material is attainable at all times inside a small area-- usually a single screen so that the user are able to conveniently click on what is necessary and have it expanded in order to get knowledgeable with the detailed material. This specific strategy is certainly in addition user-friendly and web format due to the fact that minimal actions ought to be taken to go on performing with the page and in this way we keep the site visitor progressed-- sort of "push the button and see the light flashing" thing.

Efficient ways to utilize the Bootstrap Accordion Styles:

Accordion example

Enhance the default collapse behavior to produce an Bootstrap Accordion Group.

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

In Bootstrap 4 we possess the best instruments for generating an accordion convenient and quick using the recently presented cards components including just a couple of extra wrapper features. Listed here is how: To begin making an accordion we initially need to have an element to wrap the entire item within-- set up a

<div>

element and appoint it an ID-- something like

id="MyAccordionWrapper"

or so attribute. ( more tips here)

Next it's about time to create the accordion sections-- bring in a

.card

element, into it-- a

.card-header

to make the accordion headline. Inside the header-- bring in an original headline such as

h1-- h6

with the

. card-title

class assigned and just within this particular headline wrap an

<a>

element to actually carry the heading of the section. For control the collapsing section we're about to establish it should certainly have

data-toggle = "collapse"

attribute, its goal should be the ID of the collapsing feature we'll set up in a minute like

data-target = "long-text-1"

for example and lastly-- making assured only one accordion component remains widened simultaneously we ought to also bring in a

data-parent

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

data-parent = "MyAccordionWrapper"

Another good example

<!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>

Right after this is performed it is certainly moment for creating the element which will stay concealed and maintain the current material behind the heading. To carry out this we'll wrap a

.card-block

in a

.collapse

element along with an ID attribute-- the very same ID we must insert like a goal for the url in the

.card-title

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

id ="long-text-1"

When this design has been created you are able to insert either the clear text or else further wrap your material generating a little bit more complicated system. ( read more)

Extended material

Repeating the exercise from above you are able to incorporate as many features to your accordion just as you need to. And supposing that you would like a information component to present developed-- appoint the

.in

or possibly

.show

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

.in

class goes and in Alpha 6 it gets switched out by

.show

Final thoughts

So primarily that's the way in which you have the ability to develop an perfectly working and very good looking accordion by having the Bootstrap 4 framework. Do note it uses the card feature and cards do extend the entire space accessible by default. And so mixed with the Bootstrap's grid column options you can easily set up complex pleasing styles installing the entire stuff within an element with defined amount of columns width.