Bootstrap Accordion Example

Introduction

Websites are the most excellent area to present a powerful concepts as well as pleasing content in relatively cheap and easy way and have them obtainable for the whole world to discover and get familiar with. Will the web content you've provided score audience's passion and attention-- this stuff we can easily certainly never know before you really provide it live to web server. We may however suspect with a very serious possibility of being right the impact of various components over the site visitor-- valuing perhaps from our unique experience, the good practices illustrated over the web or else most generally-- by the way a page influences ourselves throughout the time we're delivering it a design during the construction procedure. Something is clear though-- great spaces of plain text are really potential to bore the customer plus drive the viewers away-- so exactly what to perform when we simply really need to place such much larger amount of text message-- for example conditions and terms , commonly asked questions, practical lists of specifications of a product line or a professional service which require to be revealed and exact etc. Well that is certainly what the construction process in itself narrows down at the end-- discovering working answers-- and we should really look for a solution figuring this out-- showcasing the material needed to have in fascinating and desirable approach nevertheless it could be 3 web pages plain text prolonged.

A marvelous technique is wrapping the content in to the so called Bootstrap Accordion Form element-- it gives us a strong way to come with just the subtitles of our text present and clickable on page and so normally all content is easily accessible at all times inside a small space-- often a single display so the user are able to easily click on what is very important and have it expanded in order to get acquainted with the detailed web content. This specific solution is likewise intuitive and web format since minimal activities need to be taken to keep on functioning with the page and in this way we keep the visitor advanced-- sort of "push the button and see the light flashing" thing.

How you can employ the Bootstrap Accordion Table:

Accordion example

Stretch the default collapse activity to make an Bootstrap Accordion Menu.

<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 obtain the best instruments for setting up an accordion easy and fast utilizing the newly delivered cards elements providing just a handful of added wrapper features.Here is the way: To begin producing an accordion we initially require an element in order to wrap all item into-- make a

<div>

element and give it an ID-- something like

id="MyAccordionWrapper"

or so attribute. ( get more information)

Next it's point to make the accordion panels-- provide a

.card

element, in it-- a

.card-header

to make the accordion headline. Within the header-- incorporate an actual headline like

h1-- h6

with the

. card-title

class assigned and in this kind of heading wrap an

<a>

element to actually have the heading of the section. In order to control the collapsing panel we are actually about to build it should have

data-toggle = "collapse"

attribute, its aim must be the ID of the collapsing feature we'll produce soon like

data-target = "long-text-1"

for example and finally-- to make sure just one accordion feature remains expanded at a time we really should at the same time add a

data-parent

attribute leading to the master wrapper for the accordion in our example it should be

data-parent = "MyAccordionWrapper"

Yet another situation

<!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's time for creating the element which will stay hidden and keep the original material behind the heading. To perform this we'll wrap a

.card-block

in a

.collapse

element along with an ID attribute-- the identical ID we should install just as a goal for the hyperlink within the

.card-title

from above-- for the example it should be like

id ="long-text-1"

Once this design has been created you have the ability to apply either the clear text or else extra wrap your web content setting up a bit more complex structure. ( learn more)

Improved information

Repeating the practice from above you have the ability to put in as many features to your accordion as you require to. And in the case that you would like a web content component to show enlarged-- specify the

.in

or possibly

.show

classes to it according to the Bootstrap 4 build edition you're utilizing-- up to Alpha 5 the

.in

class goes and in Alpha 6 it becomes changed by

.show

Conclusions

So generally that is really the way you have the ability to deliver an absolutely functioning and very excellent looking accordion through the Bootstrap 4 framework. Do note it uses the card element and cards do spread the whole zone provided by default. So integrated along with the Bootstrap's grid column features you have the ability to simply set up complex interesting designs installing the whole thing inside an element with specified amount of columns width.