Horizontal accordion using jQuery

Question

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>

Answer 1

First, your JS and CSS could do some indenting. It's barely readable.

Now, seeing that you use transforms and you use a 2.x.x version of jQuery, I can assume you're targeting a modern browser. Instead of using jQuery's animate, you can use CSS transitions on width instead. Trigger your accordion by adding and removing classes that change the value of width. Aside from lesser JS, CSS animations are mostly hardware accelerated. This, in simple terms, mean smoother animations.

If you have the luxury of a build step, I suggest offloading the task of adding prefixes to your CSS to a task runner. Grunt or Gulp, with Autoprefixer should be able to help you.

Additionally, I would recommend being uniform with CSS colors. If you write hex most of the time, make sure they're all in hex and avoid color names. If you mostly do 6-digit hex, then write in 6-digit hex and avoid the 3 digit ones. If you're worried about file size, let a compressor task like cssmin do it for you.