Jquery Horizontal accordion

In this post we will see how to create a Jquery Simple Horizontal Accordion without using Jquery UI plugin. Jquery is a fast, small, and feature-rich JavaScript library and can be downloaded from here.With Jquery you can create many cool things like accordion using Jquery or Jquery animation, HTML document traversal and manipulation, event handling and Ajax very easily which works across almost all the modern web browsers.

1. The HTML

In order to create accordion jquery code , first of all we have to create an unordered list and then include our images in the li tags as under.

  <!DOCTYPE html>  
  <html>  
  <head>  
       <title></title>  
   <meta charset="UTF-8">  
   <meta name="description" content="Free Web tutorials">  
   <meta name="keywords" content="HTML,CSS,XML,JavaScript">  
   <meta name="author" content="John Doe">  
   <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
 <script type="text/javascript" src="anim.js"></script>  
  </head>  
  <body>  
 <div id="wrapper">  
      <ul id="accordion">  
    <li>  
     <img src="4.jpg" />      
    </li>  
    <li>  
     <img src="1.jpg" />      
    </li>  
    <li>  
     <img src="2.jpg" />      
    </li>  
    <li>  
     <img src="3.jpg" />      
   </li>  
  </ul>  
 </div>  
  </body>  
  </html>

2. Style The Accordion

 #wrapper{  
   width: 732px;  
   margin: 0 auto;  
  }  
 #accordion {  
 list-style: none;  
 margin: 40px 0;  
 padding: 0;  
 height: 345px;  
 overflow: hidden;  
 background: orange;  
 }  
 #accordion li {  
 float: left;  
 border-left:  
 display: block;  
 height: 345px;  
 width: 50px;  
 padding: 15px 0;  
 overflow: hidden;  
 border-left: 1px solid #fff;  
 }  
 #accordion li img {  
 border: none;  
 border-right: 2px solid #fff;  
 float: left;  
 margin: -14px 14px 0 0;  
 }  
 #accordion li.active {  
 width: 576px;  
 }

Note that that the width of the li items have to be of the same width as in our accordion code and the width of active tag to be equal of max width of accordion section.

3.The JQuery Code

 $(document).ready(function(){  
   activeItem = $("#accordion li:first");  
   $(activeItem).addClass('active');  
   $("#accordion li").hover(function(){  
     $(activeItem).animate({width: "50px"}, {duration:900, queue:false});  
     $(this).animate({width: "576px"}, {duration:900, queue:false});  
     activeItem = this;  
   });  
 });

you need to save this file with the name anim.js and you need to add this j query code to your document’s head section.

 <head>  
 <script type="text/javascript" src="jquery-1.9.1.js"></script>  
 <script type="text/javascript" src="anim.js"></script>  
 </head>

Tagged as : Jquery

Tuesday 29 August 2017