Bootstrap Accordion Example

Intro

Websites are the most popular field to show a effective concepts and also pleasing information in pretty cheap and simple approach and get them available for the whole world to watch and get used to. Will the information you've provided receive reader's interest and attention-- this stuff we may never ever know till you actually take it live on hosting server. We may however presume with a really big probability of correcting the effect of certain elements over the site visitor-- judging probably from our individual practical experience, the excellent practices explained over the net as well as most generally-- by the approach a webpage impacts ourselves during the time we're giving it a good shape during the designing process. One point is certain though-- big zones of clear text are very possible to bore the client as well as move the viewers elsewhere-- so what to produce as soon as we simply want to set such much larger amount of text-- for example terms , commonly asked questions, practical options of a material or else a professional services which require to be summarized and exact and so on. Well that's what the construction process in itself narrows down in the end-- identifying working answers-- and we should identify a method working this out-- showcasing the content required in desirable and interesting approach nevertheless it might be 3 web pages plain text long.

A great solution is wrapping the message within the so called Bootstrap Accordion Table component-- it presents us a powerful way to provide just the subtitles of our message clickable and present on webpage so commonly the entire content is easily accessible at all times within a compact area-- commonly a single display so that the visitor can conveniently click on what's important and have it developed in order to get acquainted with the detailed web content. This kind of solution is actually also user-friendly and web style since minimal activities have to be taken to proceed functioning with the webpage and in such manner we make the visitor progressed-- sort of "push the switch and see the light flashing" thing.

The best way to utilize the Bootstrap Accordion Styles:

Accordion example

Prolong the default collapse activity to produce 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>

Within Bootstrap 4 we have in hand the great devices for creating an accordion convenient and prompt making use of the newly provided cards components including just a few additional wrapper features.Here is the way: To start building an accordion we first really need an element to wrap the entire item within-- make a

<div>

element and give it an ID-- something like

id="MyAccordionWrapper"

or so attribute. ( more hints)

Next it's about time to create the accordion panels-- incorporate a

.card

element, into it-- a

.card-header

to create the accordion headline. Inside the header-- put in an actual headline like

h1-- h6

with the

. card-title

class assigned and within this specific heading wrap an

<a>

element to actually have the heading of the panel. If you want to control the collapsing panel we are certainly about to generate it really should have

data-toggle = "collapse"

attribute, its target must be the ID of the collapsing element we'll set up soon such as

data-target = "long-text-1"

for instance and at last-- making assured just one accordion element remains spread out simultaneously we need to additionally provide a

data-parent

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

data-parent = "MyAccordionWrapper"

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

After this is handled it is undoubtedly moment for setting up the feature that will stay hidden and keep the actual content behind the heading. To do this we'll wrap a

.card-block

within a

.collapse

component with an ID attribute-- the very same ID we must place like a target for the hyperlink within the

.card-title

from above-- for the example it should be like

id ="long-text-1"

When this structure has been produced you are able to insert either the clear text or extra wrap your web content creating a little bit more complex design. ( more helpful hints)

Enhanced content

Repeating the training from above you can surely put in as many features to your accordion just as you want to. And in the case that you desire a web content component to showcase developed-- select the

.in

.show

classes to it baseding on the Bootstrap 4 build version you are actually using-- up to Alpha 5 the

.in

class proceeds and in Alpha 6 it gets substituted by

.show

Conclusions

So basically that is actually ways you can create an fully working and quite excellent looking accordion utilizing the Bootstrap 4 framework. Do note it applies the card component and cards do extend the whole space available by default. In this way united with the Bootstrap's grid column possibilities you are able to quickly set up complex beautiful designs setting the entire thing within an element with defined amount of columns width.