update breadcrumbs to be dynamic, pull in title as last node
accordion
.sxn_ ul li .accordion_title {}
.sxn_ ul li .accordion_title.acrdn_open {}
.sxn_ ul li .accordion_content {
display: none;
}
.sxn_ ul li .accordion_title.acrdn_open .accordion_content {}function close_accordion_section() {
$('.sxn_ .accordion_title').removeClass('acrdn_open');
$('.sxn_ .accordion_content').slideUp(300).removeClass('acrdn_open');
}
$('.accordion_title').click(function(e) {
// grab current anchor value
var current_attr_value = $(this).attr('data-value');
if ($(e.target).is('.acrdn_open')) {
close_accordion_section();
} else {
close_accordion_section();
// add active class to section title
$(this).addClass('acrdn_open');
// Open up the hidden content panel
$(this).next().slideDown(300).addClass('acrdn_open');
//$('.sxn_ .accordion_content_' + current_attr_value).slideDown(300).addClass('acrdn_open');
}
e.preventDefault();
});<ul class='accordion'>
<li>
<a class='accordion_title' data-value='1' href="#"></a>
<div class='accordion_content accordion_content_1'>
<p>Mus dolupti idebite cumenia sperspercia pelia</p>
<a href="#"></a>
</div>
</li>
<li>
<a class='accordion_title' data-value='2' href="#"></a>
<div class='accordion_content accordion_content_2'>
<p></p>
<a href="#"></a>
</div>
</li>
<li>
<a class='accordion_title' data-value='3' href="#"></a>
<div class='accordion_content accordion_content_3'>
<p></p>
<a href="#"></a>
</div>
</li>
</ul>simple accordion
js
$(document).ready(function($) {
$('.accordion_list').find('.accordion_toggle').click(function(){
// expand or collapse this panel
$(this).next().slideToggle('fast');
// hide the other panels
$(".accordion_content").not($(this).next()).slideUp('fast');
});
$('.accordion_list .accordion_toggle').click(function(e){
e.preventDefault();
});
});
// expanded
$(document).ready(function($) {
$('.accordion_list').find('.accordion_toggle').click(function(){
//Expand or collapse this panel
$(this).next().slideToggle('fast');
if ( $(this).hasClass('acrdn_open') ) {
$(this).removeClass('acrdn_open');
} else {
$('.accordion_toggle').removeClass('acrdn_open');
$(this).addClass('acrdn_open');
}
//Hide the other panels
$('.accordion_content').not($(this).next()).slideUp('fast');
});
$('.accordion_list .accordion_toggle').click(function(e){
e.preventDefault();
});
});css
.sxn_ .accordion_toggle {
cursor: pointer;
}
.sxn_ .accordion_content {
display: none;
}
.sxn_ .accordion_content.acrdn_open {
display: block;
}html
<ul class='accordion_list'>
<li>
<h4 class='accordion_toggle'>Accordion 1</h4>
<div class='accordion_content acrdn_open'>
<p>Cras malesuada ultrices augue molestie risus.</p>
</div>
</li>
<li>
<h4 class='accordion_toggle'>Accordion 2</h4>
<div class='accordion_content'>
<p>Lorem ipsum dolor sit amet mauris eu turpis.</p>
</div>
</li>
<li>
<h4 class='accordion_toggle'>Accordion 3</h4>
<div class='accordion_content'>
<p>Vivamus facilisisnibh scelerisque laoreet.</p>
</div>
</li>
</ul>accordion with side element on desktop
css
/* < sxn_ > */
.sxn_ {
color: #fff;
font-size: 0;
}
.sxn_ .sxn_wrap {}
.sxn_ .accordion_list {
position: relative;
padding: 0;
text-align: left;
}
.sxn_ .accordion_toggle {
position: relative;
box-sizing: border-box;
display: block;
margin: 0 0 2px;
padding: 17px 20px 17px;
color: #fff;
font: 600 16px/1 'Lato', sans-serif;
background: rgb( 22, 62, 112 );
transition: all 250ms ease;
}
.sxn_ .acrdn_open .accordion_toggle,
.sxn_ .accordion_toggle:hover {
background-color: #51b0e7;
}
.sxn_ .accordion_toggle .span {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: perspective(1px) translateY(-50%);
display: block;
}
.sxn_ .accordion_content {
box-sizing: border-box;
display: none;
margin: 0 0 2px;
padding: 20px;
background: rgb( 22, 62, 112 );
}
.sxn_ .accordion_content:after {
content:'';
display: block;
clear: both;
}
.sxn_ .acrdn_open .accordion_content {
display: block;
}
.sxn_ .accordion_content p {
font: 14px/1.25 'Open Sans', sans-serif;
}
@media screen and (min-width: 800px) {
.sxn_ .accordion_toggle {
box-sizing: border-box;
width: 240px;
}
.sxn_ .accordion_list li:last-of-type .accordion_toggle {
margin: 0;
}
.sxn_ .accordion_content {
position: absolute;
top: 0;
right: 0;
margin: 0;
width: calc( 100% - 242px );
}
}
/* </ sxn_ > */js
// < sxn_ >
// init
$(".sxn_ .item_1").addClass( 'acrdn_open' );
$('.accordion_list').find('.accordion_toggle').click(function(){
//Expand or collapse this panel
$(this).next().slideToggle('fast');
if ( $(this).closest("li").hasClass('acrdn_open') ) {
$(this).closest("li").removeClass('acrdn_open');
} else {
$('.accordion_list li').removeClass('acrdn_open');
$(this).closest("li").addClass('acrdn_open');
}
//Hide the other panels
$('.accordion_content').not($(this).next()).slideUp('fast');
});
$('.accordion_list .accordion_toggle').click(function(e){
e.preventDefault();
});
// </ sxn_ >html
<div class='sxn_bucket sxn_'><div class='sxn_wrap'>
<ul class='accordion_list'>
<li class='item_1'>
<a class='accordion_toggle' href="#"><span>Title 1</span></a>
<div class='accordion_content'>
<p>
1 content
</p>
</div>
</li>
<li class='item_2'>
<a class='accordion_toggle' href="#"><span>Title 2</span></a>
<div class='accordion_content'>
<p>
2 content
</p>
</div>
</li>
<li class='item_3'>
<a class='accordion_toggle' href="#"><span>Title 3</span></a>
<div class='accordion_content'>
<p>
3 content
</p>
</div>
</li>
</ul>
</div></div>