Bootstrap Accordion Styles

Overview

Website pages are the best area to present a great concepts along with appealing content in pretty cheap and simple approach and get them attainable for the whole world to watch and get used to. Will the web content you've offered gain customer's passion and concentration-- this we may never notice until you really get it live on server. We are able to however guess with a very great chance of being right the impact of various components over the visitor-- determining either from our own practical experience, the good techniques explained over the web or most commonly-- by the way a webpage impacts ourselves while we're delivering it a shape during the creation procedure. One thing is clear though-- large spaces of plain text are pretty potential to bore the user as well as drive the website visitor out-- so what exactly to produce whenever we simply desire to place this sort of larger amount of text-- for example conditions and terms , frequently asked questions, technological options of a material as well as a service which in turn have to be specified and exact etc. Well that's things that the construction process itself narrows down in the end-- discovering working methods-- and we really should look for a solution figuring this one out-- feature the web content needed in pleasing and fascinating way nevertheless it might be 3 web pages clear text extensive.

A cool solution is wrapping the content into the so called Bootstrap Accordion Group component-- it provides us a great way to come with just the subtitles of our text message present and clickable on web page so normally the whole web content is obtainable at all times inside a small area-- often a single display screen with the purpose that the customer are able to easily click on what is necessary and have it enlarged in order to get familiar with the detailed web content. This specific strategy is certainly likewise intuitive and web style since minimal activities need to be taken to go on working with the web page and so we make the visitor progressed-- sort of "push the tab and see the light flashing" thing.

The best ways to apply the Bootstrap Accordion Menu:

Accordion example

Stretch the default collapse activity to develop 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>

Within Bootstrap 4 we have the perfect instruments for developing an accordion prompt and convenient applying the recently delivered cards components incorporating just a few additional wrapper elements. Listed here is how: To start making an accordion we primarily need to have an element to wrap the entire thing inside-- provide a

<div>

element and give it an ID-- something like

id="MyAccordionWrapper"

or so attribute. (see page)

Next it is without a doubt time to create the accordion sections-- include a

.card

element, inside it-- a

.card-header

to make the accordion caption. In the header-- incorporate an original heading such as

h1-- h6

with the

. card-title

class assigned and just within this heading wrap an

<a>

element to actually bring the headline of the section. In order to control the collapsing panel we are actually about to create it should certainly have

data-toggle = "collapse"

attribute, its target should be the ID of the collapsing element we'll produce in a minute similar to

data-target = "long-text-1"

for example and lastly-- making certain only one accordion component remains extended simultaneously we ought to in addition bring in a

data-parent

attribute pointing to the master wrapper with regard to the accordion in our case it really should be

data-parent = "MyAccordionWrapper"

One other 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>

When this is handled it is definitely time for setting up the component that is going to stay concealed and hold up the original content behind the heading. To execute this we'll wrap a

.card-block

within a

.collapse

component along with an ID attribute-- the similar ID we must place as a target for the hyperlink in the

.card-title

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

id ="long-text-1"

When this design has been established you can put either the plain text or else additional wrap your content setting up a little more complicated form. ( more info)

Expanded information

Repeating the drill from above you have the ability to add in as many components to your accordion as you require to. And assuming that you desire a content feature to display enlarged-- specify the

.in

or possibly

.show

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

.in

class goes and inside of Alpha 6 it gets substituted by

.show

Final thoughts

So basically that is really how you are able to make an completely functioning and very good looking accordion using the Bootstrap 4 framework. Do note it utilizes the card component and cards do extend the whole zone available by default. So mixed along with the Bootstrap's grid column options you can simply make complex eye-catching configurations inserting the entire thing inside an element with specified number of columns width.