Bootstrap Accordion Styles

Overview

Web pages are the finest field to feature a effective concepts and also fascinating content in quite cheap and simple manner and have them obtainable for the whole world to discover and get familiar with. Will the material you've offered earn client's interest and concentration-- this stuff we can certainly never discover before you really get it live upon hosting server. We may however suppose with a quite serious opportunity of correcting the impression of certain components over the site visitor-- determining perhaps from our unique practical experience, the good practices described over the web or most commonly-- by the manner a webpage has an effect on ourselves while we're offering it a design during the designing process. Something is clear though-- great fields of clear text are pretty possible to bore the customer and also push the viewers elsewhere-- so just what to perform if we just really need to insert this kind of much larger amount of text message-- such as conditions and terms , commonly asked questions, technological lists of specifications of a goods or a support service which in turn ought to be uncovered and exact etc. Well that is really things that the creation process itself narrows down in the end-- finding working answers-- and we need to find a way working this out-- display the content required in intriguing and wonderful approach nevertheless it might be 3 pages plain text prolonged.

A cool solution is covering the content within the so called Bootstrap Accordion Menu element-- it gives us a great way to come with just the explanations of our content present and clickable on web page so commonly the entire information is easily accessible at all times inside a small space-- frequently a single display screen so that the customer may simply click on what is essential and have it enlarged in order to get acquainted with the detailed information. This kind of approach is really also user-friendly and web style due to the fact that small actions have to be taken to go on doing the job with the web page and so we keep the visitor advanced-- sort of "push the button and see the light flashing" stuff.

Tips on how to use the Bootstrap Accordion Menu:

Accordion example

Increase the default collapse activity to create 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>

In Bootstrap 4 we have in hand the awesome devices for developing an accordion easy and fast making use of the recently delivered cards elements adding just a few additional wrapper features.Here is how: To begin generating an accordion we initially really need an element to wrap the whole item within-- generate a

<div>

element and appoint it an ID-- something like

id="MyAccordionWrapper"

or so attribute. ( discover more here)

Next step it is undoubtedly about time to create the accordion panels-- add in a

.card

element, inside it-- a

.card-header

to develop the accordion caption. In the header-- incorporate an original headline like

h1-- h6

with the

. card-title

class assigned and within this heading wrap an

<a>

element to certainly have the heading of the section. For you to control the collapsing panel we're about to generate it should certainly have

data-toggle = "collapse"

attribute, its aim should be the ID of the collapsing feature we'll make soon similar to

data-target = "long-text-1"

as an example and at last-- making confident only one accordion element keeps spread out at once we need to at the same time provide a

data-parent

attribute indicating the master wrapper with regard to the accordion in our example it should be

data-parent = "MyAccordionWrapper"

Yet another representation

<!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 completed it's time for generating the component which in turn will certainly stay hidden and maintain the actual information behind the headline. To carry out this we'll wrap a

.card-block

within a

.collapse

component with an ID attribute-- the similar ID we have to insert just as a goal for the url within the

.card-title

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

id ="long-text-1"

As soon as this system has been developed you can easily place either the plain text or else further wrap your material developing a little bit more complex form. (see page)

Extended web content

Repeating the training from above you can certainly provide as many features to your accordion just as you want to. And also assuming that you desire a information component to showcase expanded-- appoint the

.in

.show

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

.in

class goes and within Alpha 6 it becomes substituted by

.show

Final thoughts

So generally that is certainly ways you can deliver an perfectly functioning and pretty good looking accordion by using the Bootstrap 4 framework. Do note it uses the card feature and cards do expand the entire space provided by default. In this way mixed along with the Bootstrap's grid column features you have the ability to easily generate complex beautiful arrangements putting the entire stuff inside an element with defined variety of columns width.