Bootstrap Accordion Example

Intro

Websites are the most popular field to feature a effective ideas as well as beautiful content in pretty cheap and simple approach and have them attainable for the whole world to observe and get used to. Will the web content you've shared get viewers's interest and concentration-- this we can certainly never find out before you actually get it live for server. We may however suspect with a really serious possibility of correcting the impact of some elements over the website visitor-- reviewing possibly from our unique prior experience, the great techniques defined over the internet as well as most generally-- by the way a page has an effect on ourselves as long as we're giving it a shape during the creation procedure. One thing is sure yet-- large fields of clear text are really probable to bore the customer plus push the site visitor elsewhere-- so what exactly to produce if we simply just require to put this kind of bigger amount of text message-- like terms and conditions , frequently asked questions, technical standards of a goods or a professional services which in turn have to be summarized and exact and so forth. Well that is simply the things the design process in itself narrows down at the end-- discovering working solutions-- and we have to uncover a way figuring this out-- presenting the web content needed to have in good looking and intriguing way nevertheless it could be 3 webpages clear text extensive.

A cool technique is wrapping the content into the so called Bootstrap Accordion Styles component-- it delivers us a great way to obtain just the subtitles of our text clickable and present on web page and so generally the entire material is obtainable at all times within a small area-- usually a single display screen so that the customer are able to quickly click on what's important and have it widened to become familiar with the detailed content. This kind of solution is actually additionally user-friendly and web style because small activities have to be taken to proceed working with the web page and in this way we make the website visitor evolved-- sort of "push the tab and see the light flashing" stuff.

The way to apply the Bootstrap Accordion Example:

Accordion example

Expand the default collapse activity to make 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>

Inside Bootstrap 4 we receive the awesome devices for setting up an accordion fast and simple using the newly offered cards features bring in just a few additional wrapper features.Here is how: To start creating an accordion we primarily require an element to wrap the whole item into-- generate a

<div>

element and assign it an ID-- something like

id="MyAccordionWrapper"

or so attribute. ( useful reference)

Next step it is without a doubt point to make the accordion panels-- put in a

.card

element, inside it-- a

.card-header

to create the accordion title. Within the header-- put in an original heading such as

h1-- h6

with the

. card-title

class selected and inside of this particular heading wrap an

<a>

element to certainly have the heading of the section. To control the collapsing section we are certainly about to develop it should certainly have

data-toggle = "collapse"

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

data-target = "long-text-1"

for example and lastly-- making assured just one accordion element stays expanded simultaneously we should really likewise bring in a

data-parent

attribute leading to the master wrapper with regard to the accordion in our situation 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>

As soon as this is accomplished it is definitely the right moment for creating the feature which in turn will certainly stay concealed and keep the current information behind the heading. To do this we'll wrap a

.card-block

inside a

.collapse

component with an ID attribute-- the very same ID we have to install serving as a goal for the web link in the

.card-title

from above-- for the example it should be like

id ="long-text-1"

After this structure has been developed you are able to place either the clear text or else additional wrap your material setting up a bit more complex design. ( helpful hints)

Enhanced information

Repeating the drill from above you are able to provide as many features to your accordion as you want to. And also in the case that you prefer a content component to show extended-- specify the

.in

.show

classes to it inning accordance with the Bootstrap 4 build edition you are actually dealing with-- up to Alpha 5 the

.in

class proceeds and within Alpha 6 it becomes removed and replaced by

.show

Conclusions

So simply speaking that is actually ways you are able to create an absolutely functioning and very good looking accordion having the Bootstrap 4 framework. Do note it utilizes the card component and cards do spread the entire zone provided by default. In this way united with the Bootstrap's grid column features you may quickly make complex pleasing layouts installing the whole stuff within an element with defined quantity of columns width.