How to make horizontal accordion using jquery
Code:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
activeItem = $("#accordion li:first");
$(activeItem).addClass('active');
$("#accordion li").hover(function(){
$(activeItem).animate({width: "50px"}, {duration:300, queue:false});
$(this).animate({width: "450px"}, {duration:300, queue:false});
activeItem = this;
});
});
</script>
<style type="text/css">
#accordion {
list-style: none;
margin: 30px 0;
padding: 0;
height: 330px;
overflow: hidden;
background: #35a1de;}
#accordion li {
float: left;
border-left:
display: block;
height: 270px;
width: 50px;
padding: 15px 0;
overflow: hidden;
color: #fff;
text-decoration: none;
font-size: 16px;
line-height: 1.5em;
border-left: 1px solid #fff;}
#accordion li img {
border: none;
border-right: 1px solid #fff;
float: left;
margin: -15px 15px 0 0;
}
#accordion li.active {
width: 450px;
}
</style>
</head>
<body>
<ul id="accordion">
<li>
<strong>Speed Programming Task </strong><br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.
</li>
<li>
<strong>Data base sql server </strong><br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.
</li>
<li>
<strong>Computer Networking</strong><br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.
</li>
<li>
<strong>Backtrack Learning Exercise </strong><br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.
</li>
</ul>
</body>
</html>
Screen Shot:
Code:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
activeItem = $("#accordion li:first");
$(activeItem).addClass('active');
$("#accordion li").hover(function(){
$(activeItem).animate({width: "50px"}, {duration:300, queue:false});
$(this).animate({width: "450px"}, {duration:300, queue:false});
activeItem = this;
});
});
</script>
<style type="text/css">
#accordion {
list-style: none;
margin: 30px 0;
padding: 0;
height: 330px;
overflow: hidden;
background: #35a1de;}
#accordion li {
float: left;
border-left:
display: block;
height: 270px;
width: 50px;
padding: 15px 0;
overflow: hidden;
color: #fff;
text-decoration: none;
font-size: 16px;
line-height: 1.5em;
border-left: 1px solid #fff;}
#accordion li img {
border: none;
border-right: 1px solid #fff;
float: left;
margin: -15px 15px 0 0;
}
#accordion li.active {
width: 450px;
}
</style>
</head>
<body>
<ul id="accordion">
<li>
<strong>Speed Programming Task </strong><br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.
</li>
<li>
<strong>Data base sql server </strong><br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.
</li>
<li>
<strong>Computer Networking</strong><br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.
</li>
<li>
<strong>Backtrack Learning Exercise </strong><br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.
</li>
</ul>
</body>
</html>
No comments:
Post a Comment