Bootstrap Accordion Example

Intro

Website pages are the most excellent field to show a amazing concepts along with appealing information in pretty cheap and simple manner and have them obtainable for the entire world to discover and get used to. Will the web content you've posted score reader's passion and concentration-- this we can never ever notice before you actually get it live for hosting server. We have the ability to however suppose with a really serious probability of correcting the effect of various elements over the website visitor-- reviewing possibly from our personal experience, the excellent practices identified over the internet or else most commonly-- by the approach a web page has an effect on ourselves during the time we're giving it a good shape during the creation process. One point is certain yet-- huge fields of clear text are very potential to bore the customer as well as drive the site visitor away-- so exactly what to produce if we simply desire to apply this kind of greater amount of message-- just like conditions and terms , commonly asked questions, practical standards of a material or a customer service which in turn require to be uncovered and exact etc. Well that is actually things that the development process in itself narrows down in the end-- spotting working solutions-- and we need to uncover a method figuring this out-- presenting the web content needed in desirable and exciting way nevertheless it might be 3 pages clear text long.

A cool strategy is wrapping the text in to the so called Bootstrap Accordion Example element-- it supplies us a strong way to provide just the captions of our content clickable and present on page so typically the entire content is attainable at all times within a compact area-- commonly a single display so that the customer are able to conveniently click on what is very important and have it developed to become knowledgeable with the detailed content. This solution is definitely also intuitive and web style due to the fact that minimal actions have to be taken to continue functioning with the web page and in this way we have the website visitor progressed-- kind of "push the tab and see the light flashing" thing.

How to utilize the Bootstrap Accordion Styles:

Accordion example

Expand the default collapse behaviour to develop 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>

Within Bootstrap 4 we obtain the perfect devices for generating an accordion fast and simple applying the newly offered cards components providing just a couple of extra wrapper components.Here is the way: To begin creating an accordion we first require an element to wrap all item within-- develop a

<div>

element and assign it an ID-- something like

id="MyAccordionWrapper"

or so attribute. ( discover more here)

Next it is without a doubt point to set up the accordion sections-- add a

.card

element, inside it-- a

.card-header

to form the accordion headline. Inside the header-- add in an actual heading such as

h1-- h6

with the

. card-title

class selected and in this kind of headline wrap an

<a>

element to effectively bring the headline of the panel. For control the collapsing panel we are actually about to establish it should certainly have

data-toggle = "collapse"

attribute, its aim needs to be the ID of the collapsing feature we'll make in a minute like

data-target = "long-text-1"

for example and finally-- to make sure only one accordion element keeps extended simultaneously we have to in addition incorporate a

data-parent

attribute indicating the master wrapper for the accordion in our example 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>

When this is accomplished it is without a doubt time for creating the element which will stay hidden and carry the actual web content behind the headline. To carry out this we'll wrap a

.card-block

inside a

.collapse

element with an ID attribute-- the very same ID we have to set like a goal for the hyperlink inside the

.card-title

from above-- for the example it should be like

id ="long-text-1"

When this structure has been established you can place either the plain text or else extra wrap your content making a little more complicated system. ( more helpful hints)

Expanded web content

Repeating the practice from above you can certainly put in as many components to your accordion just as you want to. And in the case that you prefer a content component to present developed-- select the

.in

.show

classes to it inning accordance with the Bootstrap 4 build edition you're using-- up to Alpha 5 the

.in

class proceeds and inside of Alpha 6 it gets replaced by

.show

Conclusions

So essentially that is really the way you can easily generate an completely functioning and quite great looking accordion by using the Bootstrap 4 framework. Do note it employs the card element and cards do expand the entire space available by default. So merged together with the Bootstrap's grid column opportunities you are able to simply set up complex attractive designs setting the whole thing within an element with defined amount of columns width.