Submit your widget

horizontal accordion plugin for jQuery

Created 11 years ago   Views 7132   downloads 1128    Author letmehaveblog
horizontal accordion plugin for jQuery
View DemoDownload
107
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