Bootstrap Accordion Example

Intro

Web pages are the finest area to present a great concepts along with beautiful content in quite cheap and easy way and get them provided for the entire world to watch and get used to. Will the content you've offered take client's interest and attention-- this we can never ever notice before you really bring it live upon web server. We have the ability to however guess with a very great probability of being right the influence of various elements over the website visitor-- judging perhaps from our individual practical experience, the great methods illustrated over the internet or most typically-- by the manner a web page influences ourselves while we're giving it a good shape during the design process. One point is clear though-- large zones of plain text are very possible to bore the client and also push the website visitor out-- so exactly what to do when we simply just really need to set this type of larger amount of text message-- like terms , frequently asked questions, professional requirements of a product line as well as a support service which in turn need to be revealed and exact and so on. Well that is certainly the things the creation procedure in itself narrows down in the end-- identifying working methods-- and we need to find a way figuring this one out-- showcasing the web content required in exciting and pleasing manner nevertheless it could be 3 webpages plain text extensive.

A great technique is wrapping the message in to the so called Bootstrap Accordion Menu element-- it delivers us a strong way to get just the subtitles of our content present and clickable on web page so basically the entire web content is accessible at all times inside a small area-- frequently a single screen so the customer are able to simply click on what's important and have it enlarged to get acquainted with the detailed material. This particular solution is certainly additionally intuitive and web design since small actions ought to be taken to proceed operating with the page and so we keep the website visitor evolved-- somewhat "push the switch and see the light flashing" thing.

The best ways to employ the Bootstrap Accordion Menu:

Accordion example

Stretch the default collapse behavior to create 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 in hand the best tools for creating an accordion quick and easy using the recently offered cards components adding just a couple of extra wrapper components. Listed here is the way: To start generating an accordion we first need to have an element to wrap the whole item inside-- make a

<div>

element and give it an ID-- something like

id="MyAccordionWrapper"

or so attribute. ( see post)

Next step it is undoubtedly about time to build the accordion panels-- incorporate a

.card

element, inside it-- a

.card-header

to create the accordion headline. Within the header-- incorporate an original headline like

h1-- h6

with the

. card-title

class specified and just within this specific heading wrap an

<a>

element to effectively carry the headline of the panel. If you want to control the collapsing panel we are certainly about to develop it should certainly have

data-toggle = "collapse"

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

data-target = "long-text-1"

as an example and lastly-- making sure just one accordion component remains spread out at once we need to additionally provide a

data-parent

attribute pointing to the master wrapper for the accordion in our case it should be

data-parent = "MyAccordionWrapper"

One other case

<!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 handled it is definitely the right moment for designing the component which will certainly stay hidden and keep the original material behind the heading. To work on this we'll wrap a

.card-block

in a

.collapse

component along with an ID attribute-- the same ID we must put just as a goal for the url within the

.card-title

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

id ="long-text-1"

Once this format has been established you can insert either the plain text or else further wrap your material making a little more complicated structure. ( learn more here)

Enhanced material

Repeating the exercise from above you can add as many elements to your accordion as you require to. Also supposing that you prefer a web content component to display expanded-- assign the

.in

.show

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

.in

class goes and in Alpha 6 it gets substituted by

.show

Final thoughts

So primarily that is really the way in which you are able to provide an completely functioning and quite good looking accordion with the Bootstrap 4 framework. Do note it employs the card feature and cards do expand the whole space available by default. In this way combined with the Bootstrap's grid column options you can conveniently create complex attractive arrangements inserting the whole thing within an element with specified number of columns width.