Bootstrap Accordion Table

Intro

Web pages are the most popular area to present a amazing concepts and beautiful information in relatively cheap and easy approach and get them obtainable for the entire world to watch and get familiar with. Will the web content you've provided grab customer's interest and attention-- this we can never notice until you really bring it live to server. We have the ability to however suppose with a relatively serious possibility of being right the efficiency of several components over the website visitor-- valuing either from our personal practical experience, the excellent techniques explained over the net or most commonly-- by the approach a page affects ourselves throughout the time we're providing it a design during the designing process. One thing is sure yet-- great spaces of clear text are pretty potential to bore the site visitor and also push the site visitor out-- so what exactly to perform in cases where we simply require to apply this sort of greater amount of text message-- for example conditions , frequently asked questions, technical lists of specifications of a product line or a support service which in turn need to be detailed and exact and so forth. Well that's the things the design procedure itself narrows down in the end-- getting working options-- and we ought to uncover a way working this out-- present the web content required in desirable and fascinating approach nevertheless it could be 3 web pages clear text extensive.

A marvelous technique is covering the text message in to the so called Bootstrap Accordion Group feature-- it provides us a powerful way to come with just the captions of our text clickable and present on web page so generally all information is attainable at all times in a small area-- usually a single screen so the user may simply click on what is very important and have it developed to get familiar with the detailed information. This specific approach is really in addition natural and web design given that small acts ought to be taken to go on operating with the page and in this way we keep the visitor progressed-- kind of "push the tab and see the light flashing" thing.

The best ways to use the Bootstrap Accordion Menu:

Accordion example

Expand the default collapse activity to create an Bootstrap Accordion Example.

<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 obtain the excellent devices for developing an accordion convenient and fast utilizing the newly presented cards components providing just a few added wrapper components. Listed below is the way: To begin setting up an accordion we primarily really need an element to wrap the whole item within-- make a

<div>

element and assign it an ID-- something like

id="MyAccordionWrapper"

or so attribute. ( find out more)

Next it's point to establish the accordion sections-- put in a

.card

element, inside it-- a

.card-header

to develop the accordion headline. Inside the header-- add in an original headline such as

h1-- h6

with the

. card-title

class assigned and within this kind of headline wrap an

<a>

element to certainly bring the headline of the panel. To control the collapsing panel we are certainly about to create it really should have

data-toggle = "collapse"

attribute, its target should be the ID of the collapsing component we'll establish in a minute just like

data-target = "long-text-1"

for instance and at last-- to make certain just one accordion component stays expanded at a time we have to in addition provide a

data-parent

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

data-parent = "MyAccordionWrapper"

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

After this is done it is undoubtedly moment for generating the feature which in turn will certainly stay hidden and maintain the original web content behind the headline. To perform this we'll wrap a

.card-block

in a

.collapse

component along with an ID attribute-- the identical ID we should set like a goal for the link inside the

.card-title

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

id ="long-text-1"

After this design has been created you can easily put either the clear text or else further wrap your material creating a little more complex design. ( see post)

Extended information

Repeating the practice from above you can add in as many elements to your accordion just as you need to. And also if you would like a material element to display enlarged-- select the

.in

or possibly

.show

classes to it inning accordance with the Bootstrap 4 build edition you're using-- up to Alpha 5 the

.in

class proceeds and inside of Alpha 6 it becomes replaced by

.show

Final thoughts

So primarily that is really how you have the ability to generate an fully functioning and quite 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. So incorporated along with the Bootstrap's grid column features you can quickly develop complex appealing configurations inserting the entire thing within an element with specified number of columns width.