2016 m. vasario 8 d., pirmadienis

jQuery responsive tabs to accordion

https://github.com/jellekralt/Responsive-Tabs
https://github.com/samsono/Easy-Responsive-Tabs-to-Accordion


jeigu reikia tik accordion

html open tags
<div class="accordion catintro ">
<div class="accordion-section">
<a class="accordion-section-title" href="#galerija-45">Šilkografija</a>
<div id="galerija-45" class="accordion-section-content">


<script type="text/javascript">
jQuery(document).ready(function() {
function close_accordion_section() {
jQuery('.accordion .accordion-section-title').removeClass('active');
jQuery('.accordion .accordion-section-content').slideUp(300).removeClass('open');
}

jQuery('.accordion-section-title').click(function(e) {
// Grab current anchor value
var currentAttrValue = jQuery(this).attr('href');

if(jQuery(e.target).is('.active')) {
close_accordion_section();
}else {
close_accordion_section();

// Add active class to section title
jQuery(this).addClass('active');
// Open up the hidden content panel
jQuery('.accordion ' + currentAttrValue).slideDown(300).addClass('open');
}

e.preventDefault();
});
//pagal hash atidarome galerija, jei ne - atidarome pirmaja
if (window.location.hash) {
$('a.accordion-section-title[href="'+window.location.hash+'"]').trigger('click');
} else {
$('a.accordion-section-title[href="'+ $('a.accordion-section-title:first').attr('href') +'"]').trigger('click');
}
});
</script>


<style>
/*------------------------------------*\
-------- DEMO Code: accordion
\*------------------------------------*/
/*----- Accordion -----*/
.accordion, .accordion * {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}

.accordion {
overflow:hidden;
box-shadow:0px 1px 3px rgba(0,0,0,0.25);
border-radius:3px;
background:#f7f7f7;
}

/*----- Section Titles -----*/
.accordion-section-title {
width:100%;
padding:15px;
display:inline-block;
border-bottom:1px solid #1a1a1a;
background:#116b74;
transition:all linear 0.15s;
/* Type */
font-size:1.200em;
text-shadow:0px 1px 0px #1a1a1a;
color:#fff;
}

.accordion-section-title.active, .accordion-section-title:hover {
background:#01292d;
/* Type */
text-decoration:none;
}

.accordion-section:last-child .accordion-section-title {
border-bottom:none;
}

/*----- Section Content -----*/
.accordion-section-content {
padding:15px;
display:none;
}
</style>

Komentarų nėra:

Rašyti komentarą