Bootstrap Accordion Example

Introduction

Web pages are the finest field to showcase a great ideas and also appealing material in simple and quite cheap method and have them obtainable for the entire world to check out and get used to. Will the information you've posted receive viewers's passion and attention-- this stuff we can easily certainly never know before you actually bring it live upon server. We may however guess with a quite serious chance of being right the impression of various features over the site visitor-- judging either from our unique experience, the excellent techniques identified over the web or else most commonly-- by the way a page has an effect on ourselves in the time we're giving it a design during the designing process. One thing is certain though-- huge areas of clear text are very possible to bore the site visitor plus push the viewers away-- so what to produce whenever we just want to insert such bigger amount of content-- such as conditions and terms , commonly asked questions, technical standards of a material or a professional service which need to be specified and exact and so forth. Well that is really things that the style procedure in itself narrows down at the end-- identifying working solutions-- and we should really uncover a way working this one out-- feature the content needed in beautiful and exciting manner nevertheless it could be 3 webpages plain text prolonged.

A cool strategy is cloaking the text into the so called Bootstrap Accordion Table feature-- it provides us a strong way to feature just the captions of our text present and clickable on page so basically the whole web content is accessible at all times within a compact space-- often a single display with the purpose that the site visitor may conveniently click on what is necessary and have it enlarged to get knowledgeable with the detailed web content. This approach is certainly additionally instinctive and web format since small acts need to be taken to continue performing with the page and in such manner we keep the website visitor evolved-- somewhat "push the tab and see the light flashing" thing.

The way to employ the Bootstrap Accordion Menu:

Accordion example

Increase the default collapse behaviour to design an Bootstrap Accordion Styles.

<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 obtain the ideal devices for producing an accordion easy and prompt utilizing the newly presented cards elements including just a few extra wrapper elements.Here is how: To begin creating an accordion we initially need to have an element in order to wrap the entire item within-- develop a

<div>

element and delegate it an ID-- something like

id="MyAccordionWrapper"

or so attribute. ( discover more)

Next step it's the right time to establish the accordion panels-- provide a

.card

element, in it-- a

.card-header

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

h1-- h6

with the

. card-title

class assigned and just within this specific heading wrap an

<a>

element to actually carry the heading of the section. For control the collapsing panel we're about to generate it really should have

data-toggle = "collapse"

attribute, its target should be the ID of the collapsing component we'll build in a minute just like

data-target = "long-text-1"

for instance and at last-- to make certain only one accordion feature remains widened simultaneously we must also incorporate a

data-parent

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

data-parent = "MyAccordionWrapper"

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>

As soon as this is achieved it is undoubtedly the right moment for developing the feature which in turn is going to stay hidden and keep the actual web content behind the headline. To do this we'll wrap a

.card-block

inside a

.collapse

element together with an ID attribute-- the same ID we should put as a target for the link in the

.card-title

from above-- for the example it should be like

id ="long-text-1"

Once this structure has been created you are able to insert either the plain text or extra wrap your content generating a little bit more complicated form. ( read more)

Extended material

Repeating the training from above you have the ability to add in as many features to your accordion just as you want to. And in the case that you want a material element to display enlarged-- assign the

.in

.show

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

.in

class proceeds and in Alpha 6 it becomes substituted by

.show

Final thoughts

So basically that is really ways you have the ability to set up an totally working and very good looking accordion utilizing the Bootstrap 4 framework. Do note it uses the card element and cards do extend the whole zone provided by default. In this way united together with the Bootstrap's grid column opportunities you can easily generate complex attractive arrangements positioning the entire thing within an element with defined number of columns width.