TheBestTutorials.css Accordions

Accordion

An accordion is used to show (and hide) content that is broken into sections.

Click on the "Open Section" buttons below to see how it works:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Link 1 Link 2 Link 3

Accordion with Images:

Trolltunga, Norway

The TheBestTutorials-accordion class defines an accordion, and the TheBestTutorials-accordion-content class defines the part to be displayed:

Example

<div class="subhodaya-accordion subhodaya-light-grey">
<button onclick="myFunction('Demo1')" class="subhodaya-btn-block subhodaya-left-align">
    Open Section 1
</button>
<div id="Demo1" class="subhodaya-accordion-content subhodaya-container">
    <p>Some text..</p>
</div>
<button onclick="myFunction('Demo2')" class="subhodaya-btn-block subhodaya-left-align">
    Open Section 2
</button>
<div id="Demo2" class="subhodaya-accordion-content subhodaya-container">
    <p>Some text..</p>
</div>
</div>

<script>
function myFunction(id) {
    var x = document.getElementById(id);
    if (x.className.indexOf("subhodaya-show") == -1) {
        x.className += " subhodaya-show";
    } else {
        x.className = x.className.replace(" subhodaya-show", "");
    }
}
</script>

Try it Yourself »

Both the element that is used to open the accordion and the accordion's content can be any HTML element.

Accordion vs. Dropdown

The list below shows the difference between an accordion and a dropdown:

Accordions

Link 1 Link 2 Link 3

Content is 100% wide (spans the entire width of the parent element)
When opened, it pushes the page content down, if any (position:relative)
Often used to "open" multiple sections

Dropdowns

Content is minimum 160px wide and more if needed
When opened, it lays over the page content (position:absolute)
Often used to "open" one section

Accordion Buttons

You can use any HTML element to open the accordion content. We prefer a button with a TheBestTutorials-btn-block class, because it spans the entire width of its parent element, just like the accordion content (100% width). Remember that buttons in TheBestTutorials.css are centered by default. Use the TheBestTutorials-left-align class if you want them left-aligned instead. However, you do not have to follow our approach - an accordion will look good either way:

Lorem ipsum...

Centered content as well!

Example

<div class="subhodaya-accordion subhodaya-light-grey">
<button onclick="myFunc('Demo1')" class="subhodaya-btn">
    Normal button
</button>
<div id="Demo1" class="subhodaya-accordion-content">
    <p>Lorem ipsum...</p>
</div>
<button onclick="myFunc('Demo2')" class="subhodaya-btn-block subhodaya-left-align subhodaya-green">
    Left aligned & full-width
</button>
<div id="Demo2" class="subhodaya-accordion-content">
    <p>Lorem ipsum...</p>
</div>
<button onclick="myFunc('Demo3')" class="subhodaya-btn-block subhodaya-red">
Centered & full-width
</button>
<div id="Demo3" class="subhodaya-accordion-content subhodaya-center">
    <p>Centered content as well!</p>
</div>
</div>

Try it Yourself »

Active Accordion Buttons

Use JavaScript to highlight accordions that are open (clicked on):

Some text..

Some other text..

Example

// Add the subhodaya-red class to all opened accordions
var x = document.getElementById(id);
if (x.className.indexOf("subhodaya-show") == -1) {
x.className += " subhodaya-show";
x.previousElementSibling.className += " subhodaya-red";
} else {
x.className = x.className.replace("subhodaya-show", "");
x.previousElementSibling.className =
x.previousElementSibling.className.replace("subhodaya-red", "");
}

Try it Yourself »

Accordion Width

By default, the width of an accordion is 100%. To override this, change the CSS width property of the TheBestTutorials-accordion container:

Some text..

Example

Try it Yourself »

Accordion Content

Accordion with links:

Link 1 Link 2 Link 3

Example

<div class="subhodaya-accordion subhodaya-light-grey">
<button onclick="myFunction('Demo1')" class="subhodaya-btn-block subhodaya-left-align">
    Accordion
</button>
<div id="Demo1" class="subhodaya-accordion-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
</div>
</div>

Try it Yourself »

Accordion as a Card with lists:

Jill
Eve
Adam

Example

<div class="subhodaya-accordion subhodaya-card-4">
<button onclick="myFunction('Demo1')" class="subhodaya-btn-block subhodaya-left-align">
    Accordion
</button>
<div id="Demo1" class="subhodaya-accordion-content">
    <ul class="subhodaya-ul">
      <li>Jill</li>
      <li>Eve</li>
      <li>Adam</li>
    </ul>
</div>
</div>

Try it Yourself »

Accordion inside a Sidenav (Note: you will learn more about side navigations later):

Example

<nav class="subhodaya-sidenav subhodaya-light-grey subhodaya-card-2" style="width:200px;">
<a href="#">Link</a>
<div class="subhodaya-accordion">
    <a onclick="myAccFunc()" href="#">Accordion</a>
    <div id="demoAcc" class="subhodaya-accordion-content subhodaya-white subhodaya-card-4">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
</div>
<div class="subhodaya-dropdown-click">
    <a onclick="myDropFunc()" href="#">Dropdown</a>
    <div id="demoDrop" class="subhodaya-dropdown-content subhodaya-white subhodaya-card-4">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
</div>
<a href="#">Link</a>
<a href="#">Link</a>
</nav>

Try it Yourself »

Animated Accordions

Use any of the TheBestTutorials-animate-classes to fade, zoom or slide in the accordion content:

Link 1 Link 2 Link 3

Example

Try it Yourself »

« Previous

Next Chapter »