Simple Accordion using HTML and Javascript.
x
<div id="-plugin-{UNIQUE_ID}">
<dl class="accordion">
{SLIDES}
</dl>
</div>
Simple Accordion using HTML and Javascript.
x
<dt>
<a href="#">{TITLE=text}</a>
</dt>
<dd>
{DESCRIPTION=textarea}
</dd>
$(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
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);
}
}
}
}
}
This article explains how to create and use the mega menu functionality in Leiout navigation menus.
This article explains how to install and use Google's translate javascript library and implement a b...
This help article explains the CSS mix-blend-mode property and how to incorporate it with hero image...