Submit your widget

horizontal accordion plugin for jQuery

Created 13 years ago   Views 8064   downloads 1685    Author letmehaveblog
horizontal accordion plugin for jQuery
View DemoDownload
108
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