Bootstrap Accordion Example

Intro

Website pages are the greatest field to feature a great ideas along with appealing web content in pretty cheap and easy approach and have them attainable for the entire world to observe and get used to. Will the web content you've shared score customer's interest and attention-- this we may never ever notice until you actually provide it live on server. We can however suspect with a relatively serious probability of correcting the effect of several elements over the visitor-- valuing possibly from our own practical experience, the great techniques explained over the internet as well as most generally-- by the way a web page impacts ourselves while we're giving it a shape during the design process. One point is clear though-- big areas of plain text are very probable to bore the user and move the site visitor out-- so just what to produce as soon as we simply require to put this type of bigger amount of content-- just like terms and conditions , frequently asked questions, professional requirements of a goods or a support service which need to be revealed and exact etc. Well that's things that the design process itself narrows down in the end-- discovering working methods-- and we have to look for a method figuring this one out-- presenting the material required in exciting and beautiful way nevertheless it might be 3 pages plain text prolonged.

A great solution is wrapping the message in to the so called Bootstrap Accordion Group component-- it gives us a powerful way to feature just the explanations of our message present and clickable on web page so normally the whole material is readily available at all times in a compact space-- commonly a single display screen so that the site visitor are able to simply click on what's important and have it extended in order to get acquainted with the detailed content. This kind of solution is definitely in addition intuitive and web style due to the fact that minimal acts need to be taken to proceed functioning with the web page and in such manner we make the website visitor progressed-- kind of "push the button and see the light flashing" stuff.

Ways to put into action the Bootstrap Accordion Table:

Accordion example

Enhance the default collapse behaviour to develop 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>

Inside Bootstrap 4 we possess the fantastic devices for generating an accordion easy and quick employing the recently presented cards elements incorporating just a couple of extra wrapper elements.Here is how: To start producing an accordion we first require an element to wrap the whole item into-- create a

<div>

element and delegate it an ID-- something like

id="MyAccordionWrapper"

or so attribute. (read this)

Next it is undoubtedly moment to create the accordion panels-- include a

.card

element, in it-- a

.card-header

to make the accordion title. Inside the header-- bring in an actual headline such as

h1-- h6

with the

. card-title

class selected and inside of this heading wrap an

<a>

element to definitely carry the heading of the panel. For you to control the collapsing panel we're about to make it should certainly have

data-toggle = "collapse"

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

data-target = "long-text-1"

as an example and lastly-- making sure only one accordion component stays extended simultaneously we must at the same time add in a

data-parent

attribute pointing to the master wrapper with regard to the accordion in our situation it must be

data-parent = "MyAccordionWrapper"

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

Once this is achieved it is undoubtedly time for making the component that will definitely stay hidden and hold the original material behind the heading. To execute this we'll wrap a

.card-block

within a

.collapse

element along with an ID attribute-- the similar ID we must put as a goal for the link within the

.card-title

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

id ="long-text-1"

When this structure has been established you are able to insert either the clear text or extra wrap your web content generating a bit more complex design. (read this)

Improved information

Repeating the exercise from above you can certainly bring in as many features to your accordion as you need to. And assuming that you desire a content component to showcase widened-- specify the

.in

.show

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

.in

class goes and in Alpha 6 it becomes replaced by

.show

Final thoughts

So primarily that is really how you can easily deliver an absolutely working and quite great looking accordion by using the Bootstrap 4 framework. Do note it utilizes the card component and cards do extend the whole zone readily available by default. And so incorporated along with the Bootstrap's grid column solutions you can conveniently develop complex eye-catching formats inserting the entire stuff inside an element with specified variety of columns width.