IAMIR
کاربر عضو
سلام بنا به درخواست یکی از دوستان آموزش اکوردیون افقی را قرار دادم .
</li> </ul>
CSS
کد jquery
حالا کافیه محتویات خودتون فقط با محتویات دلخواه خودتون جایگزین کنید . مثلا برای تصویر از تگ img استفاده کنید .
</li> </ul>
کد:
<ul id="accordion"> <li> <img src="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> <li> <img src="images/section_2.png" /> <strong>Section 2 Header</strong><br/> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque. </li> <li> <img src="images/section_3.png" /> <strong>Section 3 Header</strong><br/> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque. </li> <li> <img src="images/section_4.png" /> <strong>Section 4 Header</strong><br/> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.
کد:
#accordion {list-style: none;margin: 30px 0;padding: 0;height: 200px;overflow: hidden;background: #7d8d96;} #accordion li {float: left;border-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;}
کد:
$(document).ready(function(){ activeItem = $("#accordion li:first"); $(activeItem).addClass('active'); $("#accordion li").hover(function(){ $(activeItem).animate({width: "50px"}, {duration:300, queue:false}); $(this).animate({width: "450px"}, {duration:300, queue:false}); activeItem = this;
});
});