<div class="accordion">
<h2 class="accordion__title">Simple responsive jQuery accordion</h2>
<div class="accordion__item">
<a href="#" class="accordion__toggle">
<i class="far fa-user"></i> Profile
<svg class="icon__chevron icon__chevron--right accordion__icon" width="7" height="13" xmlns="http://www.w3.org/2000/svg">
<path d="M.974 11.347c-.303.378-.303.992 0 1.37.304.377.797.377 1.1 0L6.52 7.185c.303-.378.303-.992 0-1.37L2.075.283c-.304-.377-.797-.377-1.101 0-.303.378-.303.992 0 1.37l3.897 4.85-3.897 4.844z" fill-rule="nonzero"/>
</svg>
</a>
<div class="accordion__content">
<div class="accordion__content-container">
<a class="accordion__a" href="#">Dashboard</a>
<a class="accordion__a" href="#">New Post</a>
<a class="accordion__a" href="#">Profile Pick</a>
</div>
</div>
</div>
<div class="accordion__item">
<a href="#" class="accordion__toggle">
<i class="far fa-envelope"></i> Messages
<svg class="icon__chevron icon__chevron--right accordion__icon" width="7" height="13" xmlns="http://www.w3.org/2000/svg">
<path d="M.974 11.347c-.303.378-.303.992 0 1.37.304.377.797.377 1.1 0L6.52 7.185c.303-.378.303-.992 0-1.37L2.075.283c-.304-.377-.797-.377-1.101 0-.303.378-.303.992 0 1.37l3.897 4.85-3.897 4.844z" fill-rule="nonzero"/>
</svg>
</a>
<div class="accordion__content">
<div class="accordion__content-container">
<a class="accordion__a" href="#">Inbox</a>
<a class="accordion__a" href="#">Sent</a>
<a class="accordion__a" href="#">Stared</a>
<a class="accordion__a" href="#">Spam</a>
</div>
</div>
</div>
<div class="accordion__item">
<a href="#" class="accordion__toggle">
<i class="fas fa-cog"></i> Settings
<svg class="icon__chevron icon__chevron--right accordion__icon" width="7" height="13" xmlns="http://www.w3.org/2000/svg">
<path d="M.974 11.347c-.303.378-.303.992 0 1.37.304.377.797.377 1.1 0L6.52 7.185c.303-.378.303-.992 0-1.37L2.075.283c-.304-.377-.797-.377-1.101 0-.303.378-.303.992 0 1.37l3.897 4.85-3.897 4.844z" fill-rule="nonzero"/>
</svg>
</a>
<div class="accordion__content">
<div class="accordion__content-container">
<a class="accordion__a" href="#">Get a Pro Account</a>
<a class="accordion__a" href="#">Profile</a>
<a class="accordion__a" href="#">Notifications</a>
<a class="accordion__a" href="#">Password</a>
</div>
</div>
</div>
<div class="accordion__item">
<a href="#" class="accordion__toggle">
<i class="fas fa-key"></i> Loggout
<svg class="icon__chevron icon__chevron--right accordion__icon" width="7" height="13" xmlns="http://www.w3.org/2000/svg">
<path d="M.974 11.347c-.303.378-.303.992 0 1.37.304.377.797.377 1.1 0L6.52 7.185c.303-.378.303-.992 0-1.37L2.075.283c-.304-.377-.797-.377-1.101 0-.303.378-.303.992 0 1.37l3.897 4.85-3.897 4.844z" fill-rule="nonzero"/>
</svg>
</a>
<div class="accordion__content">
<div class="accordion__content-container">
<a class="accordion__a" href="#">Save</a>
<a class="accordion__a" href="#">Clear History</a>
</div>
</div>
</div>
</div>
/* _____ _ _ _____ _ _ _
/ ___| | | | / ___| | | | | (_)
\ `--.| |_ _ _| | ___ \ `--. ___| |_| |_ _ _ __ __ _ ___
`--. \ __| | | | |/ _ \ `--. \/ _ \ __| __| | '_ \ / _` / __|
/\__/ / |_| |_| | | __/ /\__/ / __/ |_| |_| | | | | (_| \__ \
\____/ \__|\__, |_|\___| \____/ \___|\__|\__|_|_| |_|\__, |___/
__/ | __/ |
|___/ |___/ */
// Dimention vairables
$hozMargins: 0;
$halfHozMargins: $hozMargins / 2;
// Colors
// Set your color pallet here
// I got the color for this pallet here:
// https://dribbble.com/shots/1257916-Freebie-Flat-Accordion#shot-description
// Pannel colors
$primary: #e4644b;
$secondary: #494041;
// Text colors
$parentText: #f7f0e3;
$childText: #9c8f8e;
$bodyBackground: lighten(#9c8f8e, 33%);
// Border colors based on colors set above
$toggleBorder--top:1px solid lighten($primary, 5%);
$toggleBorder--left:1px solid lighten($primary, 5%);
$toggleBorder--right:1px solid darken($primary, 5%);
$toggleBorder--bottom: 1px solid #D05941;
//== Don't change below if you're not sure ==//
body{
background: $bodyBackground;
}
.accordion {
font-family: 'Montserrat', sans-serif;
margin: 0 auto;
width: 100%;
max-width: 768px;
font-size: 25px;
@media screen and (min-width: 768px){
font-size: 18px;
}
.far, .fas {
padding-right: 0.75rem;
}
&__title {
color: $secondary;
margin-bottom: 30px;
position: relative;
font-weight: 900;
line-height: 1.2;
}
&__item {
position: relative;
width: 100%;
height: auto;
margin: $halfHozMargins 0;
overflow: hidden;
&:first-of-type {
border-radius: 10px 10px 0 0;
}
&:last-of-type {
border-radius: 0 0 10px 10px;
}
}
&__toggle {
display: block;
padding: 10px 15px;
position: relative;
text-decoration: none;
color: $parentText;
background-color: $primary;
font-weight: 500;
border-top: $toggleBorder--top;
border-right: $toggleBorder--right;
border-bottom: $toggleBorder--bottom;
border-left: $toggleBorder--left;
text-shadow: .1em .1em rgba(0, 0, 0, 0.3);
}
&__icon {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
fill: $parentText;
}
&__item.active &__icon {
transform: translateY(-50%) rotateZ(90deg);
}
&__content {
overflow: hidden;
background-color: $secondary;
margin-top: $hozMargins;
margin-left: 0px;
margin-right: 0px;
color: $childText;
height: 0;
width: 100%;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
transition: all 0.2s linear;
border-left: 0px solid $primary;
border-right: none;
box-sizing: border-box;
font-weight: 300;
&-container {
padding: 1rem 0;
}
}
&__item.active &__content {
-webkit-transition:all 0.2s linear;
-moz-transition:all 0.2s linear;
transition:all 0.2s linear;
margin-bottom: $hozMargins;
}
&__p {
padding: 10px 15px;
margin: 0;
color: $childText;
font-weight: 300;
font-size: 0.9rem;
}
&__a {
padding: 10px 1rem;
margin: 0;
color: $childText;
font-weight: 300;
text-decoration: none;
font-size: 0.9rem;
display: block;
}
}
View Compiled
function accordion( $thisAccordion ) {
let toggles = $thisAccordion.find('.accordion__toggle');
const removeAllActiveClass = () => {
toggles.each( (e) => {
const $thisParent = $(e).parent();
$thisParent.removeClass('active');
$thisParent.find('.accordion__content').height(0);
});
};
toggles.on( 'touch click', (e) => {
e.preventDefault();
var $thisToggle = $(e.currentTarget);
var $thisParent = $thisToggle.parent();
let $thisContent = $thisParent.find('.accordion__content');
var $thisContentHeight = $thisContent.find('.accordion__content-container').outerHeight();
if( !$thisParent.hasClass('active') ){
removeAllActiveClass($thisParent);
$thisParent.addClass('active');
$thisContent.height($thisContentHeight);
}else {
$thisParent.removeClass("active");
$thisContent.height(0);
}
});
// $thisAccordion.removeClass('loading');
}
function initAccordion(thisAcc) {
thisAcc.each( function() {
accordion( $(this) );
});
}
// init accordion after elements have loaded
$(document).ready( () => {
if ( $('.accordion').length > 0 ) {
initAccordion( $('.accordion') );
}
});
// accordion to reset heights on window resize
$(window).resize( () => {
if ( $('.accordion').length > 0 ) {
initAccordion( $('.accordion') );
}
});
