Bootstrap Accordion Example

Introduction

Websites are the greatest place to feature a great concepts as well as fascinating material in quite cheap and simple manner and get them accessible for the whole world to watch and get familiar with. Will the material you've provided earn reader's interest and attention-- this stuff we may never ever figure out before you really get it live for hosting server. We may however presume with a quite serious possibility of correcting the impact of various components over the website visitor-- reviewing either from our own prior experience, the excellent methods explained over the net or most typically-- by the manner a web page impacts ourselves as long as we're giving it a design during the design procedure. Something is sure yet-- great spaces of plain text are pretty feasible to bore the site visitor plus move the site visitor elsewhere-- so exactly what to try in cases where we just really need to set this kind of much bigger amount of content-- like terms , frequently asked questions, practical options of a goods or a customer service which require to be summarized and exact etc. Well that is certainly what the design process in itself narrows down at the final-- getting working resolutions-- and we ought to discover a way working this one out-- display the content required in pleasing and intriguing way nevertheless it could be 3 pages plain text in length.

A great solution is wrapping the text in to the so called Bootstrap Accordion Example element-- it delivers us a powerful way to come with just the explanations of our text present and clickable on page so generally the whole content is easily accessible at all times within a compact space-- frequently a single screen so that the site visitor can simply click on what's important and have it extended to become acquainted with the detailed content. This solution is certainly also natural and web design because small actions have to be taken to continue doing the job with the webpage and in this way we have the website visitor advanced-- type of "push the button and see the light flashing" stuff.

Steps to use the Bootstrap Accordion Menu:

Accordion example

Increase the default collapse behavior to produce an Bootstrap Accordion Group.

<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 possess the awesome tools for providing an accordion fast and very easy applying the newly provided cards features providing just a few added wrapper components. Listed below is the way: To start making an accordion we primarily need to have an element to wrap the whole item into-- set up a

<div>

element and assign it an ID-- something like

id="MyAccordionWrapper"

or so attribute. ( get more information)

Next it is undoubtedly moment to establish the accordion sections-- add in a

.card

element, inside it-- a

.card-header

to form the accordion headline. Inside the header-- add in an original heading like

h1-- h6

with the

. card-title

class selected and inside of this headline wrap an

<a>

element to effectively bring the heading 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 goal should be the ID of the collapsing component we'll generate in a minute such as

data-target = "long-text-1"

as an example and finally-- to make certain only one accordion element continues to be widened simultaneously we need to additionally incorporate a

data-parent

attribute pointing to the master wrapper for the accordion in our good example it really 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>

Whenever this is done it is without a doubt time for generating the element that is going to stay hidden and keep the current web content behind the headline. To perform this we'll wrap a

.card-block

within a

.collapse

element with an ID attribute-- the similar ID we have to install as a goal for the url in the

.card-title

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

id ="long-text-1"

After this structure has been established you are able to insert either the clear text or else extra wrap your web content creating a bit more complex system. ( additional info)

Extended web content

Repeating the practice from above you are able to add as many features to your accordion as you want to. Also if you would like a web content element to showcase expanded-- select the

.in

or possibly

.show

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

.in

class goes and inside of Alpha 6 it becomes replaced by

.show

Final thoughts

So simply speaking that is actually the way in which you can develop an perfectly functioning and pretty excellent looking accordion by using the Bootstrap 4 framework. Do note it employs the card component and cards do expand the whole space accessible by default. So mixed along with the Bootstrap's grid column options you may easily create complex wonderful styles putting the whole thing inside an element with defined variety of columns width.