Bootstrap Accordion Example

Intro

Web pages are the finest area to present a strong concepts as well as fascinating content in pretty cheap and simple manner and get them attainable for the whole world to see and get familiar with. Will the content you've published gain viewers's passion and attention-- this we can certainly never know till you actually take it live to hosting server. We can however presume with a really great possibility of correcting the effect of various elements over the website visitor-- reviewing probably from our unique experience, the excellent practices explained over the internet as well as most typically-- by the approach a webpage has an effect on ourselves during the time we're offering it a shape during the design procedure. Something is sure yet-- large spaces of clear text are pretty feasible to bore the customer and drive the site visitor away-- so what to perform when we simply need to place this type of much larger amount of content-- like terms and conditions , frequently asked questions, technical options of a product or a customer service which in turn ought to be revealed and exact etc. Well that's what the creation process in itself narrows down at the final-- discovering working resolutions-- and we ought to identify a solution figuring this one out-- showcasing the material required in exciting and attractive approach nevertheless it could be 3 webpages plain text prolonged.

A cool method is enclosing the content into the so called Bootstrap Accordion List feature-- it offers us a great way to obtain just the captions of our content clickable and present on webpage and so commonly the entire content is accessible at all times within a small area-- frequently a single screen with the purpose that the customer may quickly click on what is essential and have it expanded to get acquainted with the detailed material. This specific solution is actually also natural and web design since minimal acts ought to be taken to keep on doing the job with the web page and in this way we keep the website visitor advanced-- somewhat "push the switch and see the light flashing" stuff.

The best ways to employ the Bootstrap Accordion List:

Accordion example

Expand the default collapse behavior to set up an Bootstrap Accordion Form.

<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 the awesome instruments for setting up an accordion simple and prompt making use of the recently delivered cards features adding just a few special wrapper features. Listed below is how: To begin creating an accordion we primarily need an element to wrap all thing into-- create a

<div>

element and assign it an ID-- something like

id="MyAccordionWrapper"

or so attribute. ( get more information)

Next step it is without a doubt about time to make the accordion panels-- put in a

.card

element, inside it-- a

.card-header

to make the accordion title. Within the header-- incorporate an actual headline such as

h1-- h6

with the

. card-title

class assigned and in this particular headline wrap an

<a>

element to certainly carry the headline of the panel. In order to control the collapsing panel we are actually about to create it should certainly have

data-toggle = "collapse"

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

data-target = "long-text-1"

for instance and finally-- making sure only one accordion component remains spread out simultaneously we must likewise incorporate a

data-parent

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

data-parent = "MyAccordionWrapper"

An additional 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>

Whenever this is handled it is certainly time for designing the component which in turn will stay concealed and hold up the current content behind the heading. To do this we'll wrap a

.card-block

within a

.collapse

element together with an ID attribute-- the similar ID we must place just as a target for the url in the

.card-title

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

id ="long-text-1"

When this structure has been developed you can easily place either the plain text or additional wrap your content generating a little more complex system. ( useful reference)

Enhanced web content

Repeating the drill from above you can certainly provide as many elements to your accordion as you want to. And also assuming that you want a web content element to showcase enlarged-- specify the

.in

.show

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

.in

class goes and within Alpha 6 it gets switched out by

.show

Conclusions

So basically that is definitely how you are able to set up an totally working and pretty good looking accordion using the Bootstrap 4 framework. Do note it utilizes the card component and cards do extend the entire zone provided by default. So combined together with the Bootstrap's grid column options you have the ability to simply set up complex wonderful formats inserting the whole thing inside an element with specified variety of columns width.