Bootstrap Accordion List

Overview

Websites are the best place to feature a strong ideas and pleasing content in easy and really cheap approach and have them attainable for the whole world to check out and get used to. Will the content you've offered get viewers's passion and concentration-- this we can never ever find out till you really provide it live for hosting server. We can however guess with a relatively big opportunity of being right the impression of several elements over the website visitor-- judging perhaps from our individual experience, the good techniques defined over the internet as well as most generally-- by the approach a web page has an effect on ourselves in the time we're delivering it a shape during the design procedure. One point is sure though-- big areas of plain text are really potential to bore the visitor and move the visitor elsewhere-- so what exactly to produce as soon as we just need to place this type of much bigger amount of content-- such as terms and conditions , frequently asked questions, practical specifications of a product as well as a professional service which in turn ought to be specificed and exact etc. Well that is certainly what the style process in itself narrows down at the end-- getting working resolutions-- and we ought to identify a method working this out-- present the web content needed in intriguing and beautiful way nevertheless it could be 3 pages plain text in length.

A good technique is enclosing the message within the so called Bootstrap Accordion List element-- it presents us a great way to feature just the subtitles of our text message present and clickable on page so typically all information is available at all times within a small space-- usually a single display so the visitor are able to simply click on what is necessary and have it enlarged to become knowledgeable with the detailed material. This particular approach is as well user-friendly and web format considering that minimal activities have to be taken to go on doing the job with the web page and in such manner we make the site visitor evolved-- somewhat "push the switch and see the light flashing" thing.

The ways to use the Bootstrap Accordion Styles:

Accordion example

Expand the default collapse behaviour to make an Bootstrap Accordion Table.

<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 obtain the perfect devices for setting up an accordion easy and fast employing the newly presented cards elements adding just a couple of special wrapper components. Listed here is how: To begin creating an accordion we first require an element to wrap the whole thing inside-- generate a

<div>

element and appoint it an ID-- something like

id="MyAccordionWrapper"

or so attribute. ( visit this link)

Next it is without a doubt point to set up the accordion panels-- provide a

.card

element, inside it-- a

.card-header

to forge the accordion headline. In the header-- add an original heading like

h1-- h6

with the

. card-title

class assigned and just within this specific heading wrap an

<a>

element to actually bring the headline of the panel. For control the collapsing section we are really about to set up it should certainly have

data-toggle = "collapse"

attribute, its target must be the ID of the collapsing feature we'll build soon like

data-target = "long-text-1"

for instance and lastly-- to make certain just one accordion element continues to be widened at once we need to additionally add in a

data-parent

attribute indicating the master wrapper for the accordion in our good example it should be

data-parent = "MyAccordionWrapper"

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

After this is accomplished it is certainly time for developing the element which in turn will certainly stay concealed and carry the current content behind the headline. To perform this we'll wrap a

.card-block

inside a

.collapse

element together with an ID attribute-- the identical ID we have to set as a target for the hyperlink inside the

.card-title

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

id ="long-text-1"

After this format has been created you can certainly place either the clear text or additional wrap your web content developing a little bit more complex system. ( read this)

Extended material

Repeating the exercise from above you can bring in as many features to your accordion just as you want to. Also if you want a content feature to show enlarged-- appoint the

.in

.show

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

.in

class goes and in Alpha 6 it gets substituted by

.show

Conclusions

So simply speaking that's the way you can easily set up an fully functioning and quite good looking accordion using the Bootstrap 4 framework. Do note it utilizes the card feature and cards do spread the entire space readily available by default. In this way united together with the Bootstrap's grid column opportunities you can quickly make complex beautiful designs putting the entire thing within an element with defined quantity of columns width.