Така че поведението по подразбиране за JQuery UI Accordion е вертикално отваряне и затваряне. Това, което преследвам, е да мога да имам същата функционалност, но само хоризонтално, а не вертикално. Като панел от дясната страна на уеб приложението, който по подразбиране е отворен, но след това можете да щракнете върху интервал отляво на div, за да затворите и отворите. Нещо като това, което е в пример c2 тук:
http://wiki.jqueryui.com/w/page/12137702/Accordion?SearchFor=accordion+horizontal&sp=1
http://www.designchemical.com/blog/index.php/jquery/jquery-simple-horizontal-accordion/
проверете връзката по-горе, тя показва прост хоризонтален акордеон.
тъй като имате само един div/panel.i модифицирах jquery, за да работи за един div/panel
<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/
