JQuery Accordion Горизонтальный свиток?

Question

Таким образом, поведение по умолчанию для JQuery UI Accordion является вертикальным открытием и закрытием. То, что я получаю, может иметь ту же функциональность, но только горизонтальную, а не вертикальную. Как панель справа от веб-приложения, которая по умолчанию открыта, но затем можно щелкнуть пробел слева от div, чтобы закрыть и открыть. Вроде как, что и в примере c2 здесь:

http://wiki.jqueryui.com/w/page/12137702/Accordion?SearchFor=accordion+horizontal&sp=1

Answer 1

http://www.designchemical.com/blog/index.php/jquery/jquery-simple-horizontal-accordion/

проверки указанной выше ссылке, она показывает простую горизонтальную гармошку.

, поскольку у вас есть только один DIV/panel.i модифицировали JQuery работать на один DIV/панель

 <ul id="accordion"> 
     <li> 
     <img src="http://www.designchemical.com/lab/jquery/demo/images/section_1.png" /> 
      <strong>Section 1 Header</strong><br/> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque. 
     </li> 
      </ul> 

CSS:

  #accordion { 
       list-style: none; 
       margin: 30px 0; 
       padding: 0; 
       height: 200px; 
       overflow: hidden; 
       background: #7d8d96;} 

     #accordion li { 
       float: left;     
       display: block; 
       height: 170px; 
       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; 
      } 

Jquery:

  $(document).ready(function(){  
       var flag=true; 
       $("#accordion li").click(function(){   
        if(flag==false) 
        { 
         $(this).animate({width: "50px"}, {duration:300, queue:false}); 
         flag=true; 
        } 
        else{ 
         $(this).animate({width: "450px"}, {duration:300, queue:false}); 
         flag=false; 
          }  
         }); 
      }); 

проверьте эту скрипту: http://jsfiddle.net/Kritika/5YECg/2/