Submit your widget

horizontal accordion plugin for jQuery

Created 9 years ago   Views 12818   downloads 1937    Author letmehaveblog
horizontal accordion plugin for jQuery
View DemoDownload 1.4 KB
151
Share |

It is very simple, with a few parameters: speed set the velocity of the animation, headerclass set another classname for header divs (by default "header"), contentclass set another classname for content divs (by default "content"), contentwidth is the final with of each content panel.

HTHML Sample:

  .haccordion .header, .haccordion .content{
   float: left;
   height: 250px;
  }
  
  .haccordion .header{
   width: 20px;
   background: #ccc;
   color: #fff;
   cursor: pointer;
   border-right:1px solid #fff;
  }
  
  .haccordion .content{
   display: none;
   width: 0px;
   overflow: auto;
  }
  
  .haccordion .content p{
   margin: 5px;
  }

 <div class="haccordion">
  <div class="header">*1</div>
  <div class="content"><p>This is a sample of content for Content1 with a large text, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing</p></div>
  <div class="header">*2</div>
  <div class="content"><p>This is a sample of content for Content2 with a large text, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing</p></div>
  <div class="header">*3</div>
  <div class="content"><p>This is a sample of content for Content3 with a large text, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing</p></div>
 </div>

JavaScript Sample code:

  $(function(){
   $(".haccordion").haccordion();
  });

Tag: accordion