Bootstrap Accordion List

Introduction

Website pages are the best field to display a effective concepts as well as pleasing information in pretty cheap and simple approach and get them accessible for the whole world to check out and get used to. Will the information you've shared receive client's passion and attention-- this stuff we can never know before you actually get it live to server. We can however think with a relatively great opportunity of correcting the effect of some components over the visitor-- reviewing either from our personal experience, the excellent methods identified over the internet as well as most generally-- by the manner a webpage impacts ourselves while we're giving it a good shape during the construction process. Something is sure though-- large fields of plain text are very potential to bore the customer and drive the customer out-- so what to operate in cases where we just desire to put such much bigger amount of text message-- for example conditions , commonly asked questions, technological lists of specifications of a material or else a support service which have to be specificed and exact and so forth. Well that's what the development process in itself narrows down in the end-- discovering working options-- and we should really look for a method working this out-- feature the material needed to have in beautiful and intriguing way nevertheless it could be 3 webpages clear text prolonged.

A good method is enclosing the text in to the so called Bootstrap Accordion Group element-- it presents us a strong way to get just the subtitles of our content present and clickable on webpage so typically the whole content is attainable at all times inside a small area-- commonly a single screen so that the user may quickly click on what is necessary and have it expanded to become knowledgeable with the detailed web content. This particular solution is likewise intuitive and web format due to the fact that small activities have to be taken to keep on operating with the webpage and so we have the visitor evolved-- type of "push the tab and see the light flashing" stuff.

The best ways to utilize the Bootstrap Accordion List:

Accordion example

Expand the default collapse activity to design 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 have the best tools for producing an accordion simple and fast making use of the recently provided cards elements bring in just a few additional wrapper features. Listed below is how: To begin creating an accordion we initially need an element to wrap the whole item inside-- provide a

<div>

element and appoint it an ID-- something like

id="MyAccordionWrapper"

or so attribute. ( additional reading)

Next it's about time to generate the accordion panels-- put in a

.card

element, in it-- a

.card-header

to forge the accordion caption. In the header-- incorporate an actual heading such as

h1-- h6

with the

. card-title

class appointed and inside of this specific heading wrap an

<a>

element to actually carry the heading of the section. To control the collapsing section we are undoubtedly about to create it really should have

data-toggle = "collapse"

attribute, its goal must be the ID of the collapsing component we'll build soon just like

data-target = "long-text-1"

for example and finally-- making sure just one accordion component continues to be widened simultaneously we should in addition provide a

data-parent

attribute indicating the master wrapper for the accordion in our case it really should be

data-parent = "MyAccordionWrapper"

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

When this is completed it is without a doubt the right moment for developing the component which is going to stay concealed and carry the original content behind the headline. To perform this we'll wrap a

.card-block

inside a

.collapse

element with an ID attribute-- the very same ID we should put like a goal for the url within the

.card-title

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

id ="long-text-1"

As soon as this system has been created you are able to set either the plain text or additional wrap your content developing a little more complex structure. ( visit this link)

Extended information

Repeating the practice from above you can provide as many elements to your accordion as you need to. And also supposing that you would like a content component to display developed-- appoint the

.in

or possibly

.show

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

.in

class proceeds and within Alpha 6 it becomes removed and replaced by

.show

Final thoughts

So primarily that's the way in which you are able to provide an absolutely functioning and very excellent looking accordion through the Bootstrap 4 framework. Do note it employs the card element and cards do extend the entire zone accessible by default. So incorporated together with the Bootstrap's grid column solutions you are able to conveniently make complex attractive arrangements inserting the whole thing within an element with specified number of columns width.