VictorKravtsov.com

Bootstrap Accordion List

Overview

Website pages are the best field to show a strong ideas along with amazing web content in easy and really cheap approach and have them accessible for the whole world to watch and get familiar with. Will the web content you've published earn viewers's passion and concentration-- this we can never figure out till you really take it live to web server. We are able to however presume with a relatively big chance of correcting the impact of some components over the website visitor-- reviewing probably from our own experience, the excellent methods illustrated over the internet or most generally-- by the way a page impacts ourselves during the time we're offering it a design during the design process. Something is certain though-- great spaces of plain text are very potential to bore the visitor and also move the site visitor out-- so exactly what to do as soon as we simply wish to insert such much bigger amount of text-- like conditions , frequently asked questions, practical standards of a material as well as a professional services which require to be summarized and exact and so forth. Well that is certainly what the creation process in itself narrows down in the end-- spotting working resolutions-- and we really should find a way working this one out-- feature the web content needed in pleasing and exciting way nevertheless it could be 3 web pages clear text prolonged.

A marvelous method is cloaking the content within the so called Bootstrap Accordion Table component-- it provides us a great way to feature just the explanations of our message clickable and present on web page and so generally the entire web content is obtainable at all times inside a compact area-- commonly a single display so the customer are able to simply click on what is very important and have it widened in order to get acquainted with the detailed content. This specific approach is as well user-friendly and web style due to the fact that minimal acts need to be taken to keep on functioning with the page and so we make the site visitor advanced-- type of "push the tab and see the light flashing" stuff.

How to employ the Bootstrap Accordion Form:

Accordion example

Expand the default collapse activity to design an Bootstrap Accordion Menu.

Accordion  scenario

Accordion  situation
Accordion example
<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 ideal instruments for creating an accordion prompt and easy employing the recently provided cards features providing just a few additional wrapper components. Listed here is how: To start building an accordion we primarily really need an element to wrap the whole item within-- make a

<div>
element and assign it an ID-- something like
id="MyAccordionWrapper"
or so attribute. ( learn more)

Next step it is undoubtedly the right time to establish the accordion sections-- provide a

.card
element, inside it-- a
.card-header
to make the accordion title. Inside the header-- bring in an original headline like
h1-- h6
with the
. card-title
class specified and in this kind of heading wrap an
<a>
element to certainly carry the heading of the panel. In order to control the collapsing panel we are definitely about to build it really should have
data-toggle = "collapse"
attribute, its goal needs to be the ID of the collapsing feature we'll generate soon such as
data-target = "long-text-1"
for example and finally-- to make assured just one accordion feature continues to be widened at a time we need to additionally bring in a
data-parent
attribute pointing to the master wrapper with regard to the accordion in our case it must be
data-parent = "MyAccordionWrapper"

One more situation

 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 time for developing the component which in turn will definitely stay concealed and hold the original web content behind the headline. To carry out this we'll wrap a

.card-block
within a
.collapse
element along with an ID attribute-- the very same ID we must put just as a target for the url in the
.card-title
from above-- for the example it really should be like
id ="long-text-1"

When this structure has been produced you can easily set either the clear text or else additional wrap your web content setting up a bit more complicated design. ( more helpful hints)

Expanded material

Repeating the practice from above you can certainly add as many features to your accordion as you need to. And also assuming that you desire a web content element to display extended-- specify the

.in
or possibly
.show
classes to it inning accordance with the Bootstrap 4 build edition you are actually utilizing-- up to Alpha 5 the
.in
class goes and inside of Alpha 6 it becomes switched out by
.show

Final thoughts

So primarily that's how you are able to create an completely working and very excellent looking accordion using the Bootstrap 4 framework. Do note it uses the card element and cards do spread the entire space provided by default. So mixed with the Bootstrap's grid column opportunities you can conveniently create complex wonderful styles placing the whole thing within an element with specified number of columns width.

Examine some video clip tutorials about Bootstrap Accordion

Linked topics:

Bootstrap accordion official information

Bootstrap acoordion  formal  documents

How to make a Bootstrap v4 accordion collapse when clicking the whole header div?

How to make a Bootstrap v4 accordion collapse when clicking the whole header div?

GitHub:Collapse Accordion is still using Panels

GitHub:Collapse Accordion is still using Panels