Bootstrap Accordion Group

Introduction

Web pages are the most excellent area to show a highly effective ideas and also pleasing information in easy and really cheap manner and get them provided for the entire world to see and get used to. Will the web content you've shared take client's passion and attention-- this stuff we can never discover before you actually bring it live for web server. We have the ability to however guess with a very great opportunity of correcting the impression of several components over the visitor-- determining possibly from our individual knowledge, the great methods identified over the web or most generally-- by the way a web page influences ourselves while we're offering it a form during the designing procedure. Something is sure though-- huge zones of plain text are very probable to bore the site visitor and also drive the viewers elsewhere-- so what exactly to operate as soon as we just really need to apply such much larger amount of text-- like conditions and terms , frequently asked questions, special requirements of a material or a service which in turn ought to be summarized and exact and so on. Well that's what the style process itself narrows down at the end-- obtaining working methods-- and we should really look for a solution working this one out-- showcasing the content needed to have in interesting and appealing way nevertheless it might be 3 webpages plain text long.

A cool technique is cloaking the text message into the so called Bootstrap Accordion Form feature-- it gives us a powerful way to have just the explanations of our message present and clickable on webpage so commonly all information is obtainable at all times inside a compact space-- often a single screen so the customer may quickly click on what is essential and have it widened in order to get acquainted with the detailed material. This particular method is definitely also user-friendly and web style because small actions ought to be taken to proceed working with the webpage and so we keep the website visitor progressed-- somewhat "push the button and see the light flashing" thing.

The way to utilize the Bootstrap Accordion Menu:

Accordion example

Prolong the default collapse activity to generate an Bootstrap Accordion List.

<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 possess the best instruments for designing an accordion very easy and fast employing the newly presented cards components incorporating just a few added wrapper elements. Listed below is the way: To start setting up an accordion we primarily require an element to wrap the entire thing inside-- provide a

<div>

element and appoint it an ID-- something like

id="MyAccordionWrapper"

or so attribute. ( click this link)

Next step it's time to generate the accordion sections-- add in a

.card

element, in it-- a

.card-header

to make the accordion headline. Inside the header-- add an original headline such as

h1-- h6

with the

. card-title

class specified and in this specific headline wrap an

<a>

element to definitely have the headline of the section. If you want to control the collapsing section we are actually about to generate it really should have

data-toggle = "collapse"

attribute, its target needs to be the ID of the collapsing element we'll build soon such as

data-target = "long-text-1"

as an example and finally-- making confident just one accordion component stays expanded simultaneously we have to at the same time incorporate a

data-parent

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

data-parent = "MyAccordionWrapper"

An additional 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 truly moment for developing the component that will definitely stay hidden and hold up the original information behind the headline. To do this we'll wrap a

.card-block

inside a

.collapse

component together with an ID attribute-- the similar ID we have to put just as a target for the link within the

.card-title

from above-- for the example it should be like

id ="long-text-1"

After this system has been generated you can easily place either the clear text or additional wrap your material making a bit more complex structure. ( useful source)

Improved material

Repeating the practice from above you have the ability to add in as many elements to your accordion just as you require to. Also in the case that you would like a content element to display developed-- appoint the

.in

.show

classes to it baseding upon the Bootstrap 4 build version you're working with-- up to Alpha 5 the

.in

class proceeds and inside of Alpha 6 it becomes changed by

.show

Conclusions

So simply speaking that is actually ways in which you can easily make an fully functioning and pretty good looking accordion having the Bootstrap 4 framework. Do note it utilizes the card feature and cards do extend the whole zone accessible by default. So united together with the Bootstrap's grid column opportunities you may simply generate complex pleasing designs setting the entire thing inside an element with defined variety of columns width.