Horizontal sliding accordion

Back to Posts

Horizontal sliding accordion

Horizontal sliding accordion which animate on hover. this is easy to created and customize.

HTML

<body>
<div id=”content”>
<ul class=”accordion” id=”accordion”>
<li class=”bg1″>
<div class=”heading”>Accordion 1</div>
<div class=”bgDescription”></div>
<div class=”description”>
<h2>Accordion 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur.</p>
<a href=”#”>more &rarr;</a> </div>
</li>
<li class=”bg2″>
<div class=”heading”>Accordion 2</div>
<div class=”bgDescription”></div>
<div class=”description”>
<h2>Accordion 2</h2>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
quae ab illo inventore veritatis et quasi architecto beatae vitae
dicta sunt explicabo. </p>
<a href=”#”>more &rarr;</a> </div>
</li>
<li class=”bg3″>
<div class=”heading”>Accordion 3</div>
<div class=”bgDescription”></div>
<div class=”description”>
<h2>Accordion 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur.</p>
<a href=”#”>more &rarr;</a> </div>
</li>
<li class=”bg4 bleft active”>
<div class=”heading”>Accordion 4</div>
<div class=”bgDescription”></div>
<div class=”description”>
<h2>Accordion 4</h2>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
quae ab illo inventore veritatis et quasi architecto beatae vitae
dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
sit aspernatur aut odit aut fugit, sed quia consequuntur magni
dolores eos qui ratione voluptatem sequi nesciunt.</p>
<a href=”#”>more &rarr;</a> </div>
</li>
</ul>
</div>
</body>

CSS

<style>
ul.accordion > li.active {
width: 480px;
}
ul.accordion {
list-style: none;
position: absolute;
right: 80px;
top: 0px;
font-family: Cambria, serif;
font-size: 16px;
font-style: italic;
line-height: 1.5em;
}
ul.accordion li {
float: right;
width: 115px;
height: 480px;
display: block;
border-right: 2px solid #66e1f0;
border-bottom: 2px solid #66e1f0;
background-color: #66e1f0;
background-repeat: no-repeat;
background-position: center center;
position: relative;
overflow: hidden;
cursor: pointer;
-moz-box-shadow: 1px 3px 15px #555;
-webkit-box-shadow: 1px 3px 15px #555;
box-shadow: 1px 3px 15px #555;
}
ul.accordion li.bg1 {
background-image: url(../images/1.jpg);
}
ul.accordion li.bg2 {
background-image: url(../images/2.jpg);
}
ul.accordion li.bg3 {
background-image: url(../images/3.jpg);
}
ul.accordion li.bg4 {
background-image: url(../images/4.jpg);
}
ul.accordion li.bleft {
border-left: 2px solid #fff;
}
ul.accordion li .heading {
background-color: #fff;
padding: 10px;
margin-top: 60px;
opacity: 0.9;
text-transform: uppercase;
font-style: normal;
font-weight: bold;
letter-spacing: 1px;
font-size: 14px;
color: #444;
text-align: center;
text-shadow: -1px -1px 1px #ccc;
}
ul.accordion li .description {
position: absolute;
width: 480px;
height: 175px;
bottom: 0px;
left: 0px;
display: none;
}
ul.accordion li .description h2 {
text-transform: uppercase;
font-style: normal;
font-weight: bold;
letter-spacing: 1px;
font-size: 45px;
color: #fff;
text-align: left;
margin: 0px 0px 15px 20px;
text-shadow: -1px -1px 1px #ccc;
}
ul.accordion li .description p {
line-height: 14px;
margin: 10px 22px;
font-family: “Trebuchet MS”, sans-serif;
font-size: 12px;
font-style: italic;
font-weight: normal;
text-transform: none;
letter-spacing: normal;
line-height: 1.6em;
}
ul.accordion li .description a {
position: absolute;
bottom: 5px;
left: 20px;
text-transform: uppercase;
font-style: normal;
font-size: 11px;
text-decoration: none;
color: #888;
}
ul.accordion li .description a:hover {
color: #333;
text-decoration: underline;
}
ul.accordion li .bgDescription {
background: transparent url(../images/bgDescription.png) repeat-x top left;
height: 340px;
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
display: none;
}
</style>

Script

<script>
$(function() {
$(‘#accordion > li’).hover(
function () {
var $this = $(this);
$(‘li’).stop().animate({‘width’:’115px’},1000);
$this.stop().animate({‘width’:’480px’},500);
$(‘.heading’,$this).stop(true,true).fadeOut();
$(‘.bgDescription’,$this).stop(true,true).slideDown(500);
$(‘.description’,$this).stop(true,true).fadeIn();
},
function () {
var $this = $(this);
$this.stop().animate({‘width’:’115px’},1000);
$(‘.heading’,$this).stop(true,true).fadeIn();
$(‘.description’,$this).stop(true,true).fadeOut(500);
$(‘.bgDescription’,$this).stop(true,true).slideUp(700);
$(‘.bg4’).stop().animate({‘width’:’480px’},500);
}
);

$(function() {
$(‘#accordion’).on(‘click’, ‘li’, function() {
$(‘.accordion li.active’).removeClass(‘active’); //Remove any “active” class
$(‘li’, this).addClass(‘active’); //Add “active” class to selected tab

//Commented since it is not available
//$(activeTab).show(); //Fade in the active content
return false;
});
});

});

</script>

Back to Posts