Simple Accordion

Patrick Watertor
Leiout Developer

Published on 07/16/2021

Help Article Plugins

Description

Simple Accordion using HTML and Javascript.

WRAPPER

x
 
<div id="-plugin-{UNIQUE_ID}">
    <dl class="accordion">
        {SLIDES}
    </dl>
</div>

Simple Accordion using HTML and Javascript.

SLIDE

x
 
<dt>
    <a href="#">{TITLE=text}</a>
</dt>
<dd>
    {DESCRIPTION=textarea}
</dd>

JS

​x
 
$(document).ready(function(){
  $("#-plugin-{UNIQUE_ID} .accordion").each(function(){
    var allPanels = $(this).children("dd").hide();
    $(this).children("dd").first().slideDown("easeOutExpo");
    $(this).children("dt").children("a").first().addClass("active");
​
    $(this).children("dt").children("a").click(function(){        
      var current = $(this).parent().next("dd");
      $("#-plugin-{UNIQUE_ID} .accordion > dt > a").removeClass("active");
      $(this).addClass("active");
      allPanels.not(current).slideUp("easeInExpo");
      $(this).parent().next().slideDown("easeOutExpo");                
      return false;                
    });    
​
    $('#-plugin-{UNIQUE_ID}').find('.nav-link:first').trigger('click');
​
  });
}); //document.ready
​
​

WORKING EXAMPLE

What's the fastest delivery option?: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vehicula porttitor rutrum. Ut laoreet sodales rutrum. Ut eget tristique nibh. Cras mattis est eget lacus dignissim, non consectetur velit pellentesque. Ut sit amet placerat eros, id gravida arcu. Sed felis purus, tempor ac vestibulum nec, consectetur at purus.
How do I change my payment method?: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vehicula porttitor rutrum. Ut laoreet sodales rutrum. Ut eget tristique nibh. Cras mattis est eget lacus dignissim, non consectetur velit pellentesque. Ut sit amet placerat eros, id gravida arcu. Sed felis purus, tempor ac vestibulum nec, consectetur at purus.
What's your return policy?: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vehicula porttitor rutrum. Ut laoreet sodales rutrum. Ut eget tristique nibh. Cras mattis est eget lacus dignissim, non consectetur velit pellentesque. Ut sit amet placerat eros, id gravida arcu. Sed felis purus, tempor ac vestibulum nec, consectetur at purus.
Do you have price breaks on large quantity purchases?: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vehicula porttitor rutrum. Ut laoreet sodales rutrum. Ut eget tristique nibh. Cras mattis est eget lacus dignissim, non consectetur velit pellentesque. Ut sit amet placerat eros, id gravida arcu. Sed felis purus, tempor ac vestibulum nec, consectetur at purus.
Do you deliver on holidays?: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vehicula porttitor rutrum. Ut laoreet sodales rutrum. Ut eget tristique nibh. Cras mattis est eget lacus dignissim, non consectetur velit pellentesque. Ut sit amet placerat eros, id gravida arcu. Sed felis purus, tempor ac vestibulum nec, consectetur at purus.
What are you most popular items?: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vehicula porttitor rutrum. Ut laoreet sodales rutrum. Ut eget tristique nibh. Cras mattis est eget lacus dignissim, non consectetur velit pellentesque. Ut sit amet placerat eros, id gravida arcu.

CSS for Working Example

xxxxxxxxxx
 
#-plugin-{UNIQUE_ID} {
​
    .accordion {
        > dd{
                margin-bottom: 10px;
                padding: 10px 20px 20px;
                font-size: 14px;
                line-height: 1.8;
                color: #777;
            }
​
         > dt{
                margin-bottom: 10px;
                font-size: 12px;
                font-weight: 400;
                text-transform: uppercase;
                letter-spacing: 0.2em;
​
                 > a{
                    display: block;
                    position: relative;
                    color: #777;
                    text-decoration: none;
                    padding: 14px 20px;
                    border: 1px solid #e5e5e5;
​
​
                    -webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);  
                    -moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); 
                    -o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
                    -ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); 
                    transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
​
                    &:hover{
                        text-decoration: none;
                        border-color: #ddd;
                        background-color: #fcfcfc;    
                        color: #444;
​
                        :after {
                            color: #444;
                        }
                    }
​
                    .active{
                        color: #000;
                        border-color: #ddd;
                        background-color: #fcfcfc;
                        cursor: default;
​
                        :after, :hover:after {
                             content: "\f106";
                             color: #111;
                        }
                    }
                    :after{
                        content: "\f107";
                        width: 15px;
                        height: 15px;
                        margin-top: -8px;
                        position: absolute;
                        top: 50%;
                        right: 10px;
                        font-family: 'FontAwesome';
                        speak: none;
                        font-style: normal;
                        font-weight: normal;
                        font-variant: normal;
                        text-transform: none;
                        font-size: 15px;
                        line-height: 15px;
                        text-align: center;
                        color: #999;
                        -webkit-font-smoothing: antialiased;
                        -webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);  
                        -moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); 
                        -o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
                        -ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); 
                        transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
                }
            }
        }
    }
}
                        :after {

DOWNLOAD

Download Catalog File

NOTES

You can style your accordion in any way you would like! This example uses the same style as the Rythm template and is shown above.

Simple Accordion

Description

WRAPPER

SLIDE

JS

WORKING EXAMPLE

CSS for Working Example

DOWNLOAD

NOTES

Lottie Animations

Navik Mega Menu

Google Translate

Mix Blend Mode

Resource

Solutions

Company