I am trying to create a horizontal accordion using jQuery. The code works fine, but I just want to know if my approach is correct and if there are any improvements I could make to the existing code.$(document).ready(function () {$(ul li).children(.Acc_Content).animate({ width: '0px' },{ duration: 1000, queue: false }).addClass(remove);$(.Acc_Content).first().animate({ width: '600px' }, { duration: 1000, queue: false }).removeClass(remove).addClass(add);$(.Acc_Name).click(function () {$(.Acc_Content).animate({ width: '0px' }, { duration: 1000, queue: false }).removeClass(add).addClass(remove);$(this).next(.Acc_Content).animate({ width: '600px' }, { duration: 1000, queue: false }).removeClass(remove).addClass(add);});});body{font-family: Arial;}ul{list-style: none;}.Acc_Name{background-color: #808080;color: white;border:1px solid #000;margin:0px 1px;height:150px;width:30px;float:left;}.Acc_Name span{margin:5px;float:left;line-height:20px;font-weight:bold;   -moz-transform:rotate(270deg); -webkit-transform:rotate(270deg)}.Acc_Content{float:left;height:150px;border:1px solid #000;}.add{display:block;}.remove{display:none;}p{margin: 10px;}<script src=https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js></script><ul><li>    <div class=Acc_Name>    <span>One</span>    </div>    <div class=Acc_Content><p>Hello Test1</p></div></li><li>    <div class=Acc_Name>    <span>Two</span>    </div>    <div class=Acc_Content><p>Hello Test2</p></div></li><li>    <div class=Acc_Name>    <span>Three</span>    </div>    <div class=Acc_Content><p>Hello Test3</p></div></li><li>    <div class=Acc_Name>    <span>Four</span>    </div>    <div class=Acc_Content><p>Hello Test4</p></div></li>
Horizontal accordion using jQuery
javascript;jquery