Header Ads

Header ADS

How to make horizontal accordion using jquery

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:

How to make horizontal accordion using jquery

No comments

Powered by Blogger.