Bootstrap Accordion Table

Overview

Website pages are the greatest field to present a strong ideas as well as fascinating web content in simple and pretty cheap method and have them attainable for the entire world to watch and get familiar with. Will the web content you've posted gain audience's interest and attention-- this we may certainly never know until you really get it live on web server. We are able to however suppose with a very serious opportunity of being right the influence of some components over the visitor-- determining probably from our unique prior experience, the excellent practices illustrated over the web as well as most generally-- by the approach a webpage affects ourselves as long as we're offering it a shape during the development process. One thing is sure yet-- large spaces of clear text are really feasible to bore the user and push the customer away-- so exactly what to operate when we simply want to place this sort of bigger amount of content-- just like conditions , commonly asked questions, professional specifications of a product or a professional services which in turn need to be specified and exact and so forth. Well that is certainly things that the style process in itself narrows down at the end-- getting working methods-- and we ought to identify a way figuring this out-- present the material needed to have in exciting and beautiful approach nevertheless it could be 3 pages clear text long.

A cool technique is enclosing the message within the so called Bootstrap Accordion Menu element-- it delivers us a highly effective way to come with just the subtitles of our text message clickable and present on web page so commonly all content is available at all times within a small space-- often a single display so that the customer can quickly click on what is very important and have it widened in order to get knowledgeable with the detailed content. This method is certainly likewise user-friendly and web format given that small actions have to be taken to continue doing the job with the web page and in such manner we make the website visitor advanced-- somewhat "push the switch and see the light flashing" stuff.

Efficient ways to put into action the Bootstrap Accordion Table:

Accordion example

Prolong the default collapse behaviour to generate 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 have in hand the awesome tools for generating an accordion quick and very easy using the recently provided cards features including just a handful of added wrapper elements. Listed here is how: To start making an accordion we first need to have an element in order to wrap the whole thing in-- set up a

<div>

element and appoint it an ID-- something like

id="MyAccordionWrapper"

or so attribute. ( get more info)

Next it is without a doubt moment to build the accordion sections-- put in a

.card

element, into it-- a

.card-header

to create the accordion headline. Inside the header-- add an original heading like

h1-- h6

with the

. card-title

class specified and inside of this specific heading wrap an

<a>

element to definitely carry the headline of the section. For you to control the collapsing section we are undoubtedly about to create it should have

data-toggle = "collapse"

attribute, its aim must be the ID of the collapsing component we'll create soon similar to

data-target = "long-text-1"

for instance and lastly-- making certain only one accordion element continues to be widened at once we really should additionally add in a

data-parent

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

data-parent = "MyAccordionWrapper"

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

When this is done it is definitely the right moment for designing the element that will definitely stay concealed and carry the original content behind the headline. To work on this we'll wrap a

.card-block

in a

.collapse

component with an ID attribute-- the identical ID we must apply serving as a target for the web link within the

.card-title

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

id ="long-text-1"

Once this structure has been set up you have the ability to apply either the plain text or extra wrap your web content generating a bit more complex design. ( read this)

Improved content

Repeating the drill from above you are able to provide as many elements to your accordion as you require to. And also if you desire a content component to display developed-- assign the

.in

.show

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

.in

class goes and in Alpha 6 it gets replaced by

.show

Final thoughts

So essentially that is really how you can easily create an perfectly functioning and quite good looking accordion by having the Bootstrap 4 framework. Do note it uses the card component and cards do extend the entire zone readily available by default. In this way combined along with the Bootstrap's grid column solutions you may conveniently set up complex eye-catching configurations placing the entire stuff inside an element with specified amount of columns width.