how to apply accordion effect manually <p>I've made some boxes which will be be expanded and hidden by clicking on the titles of the boxes. I've just used slideToggle() for making it. I need another effect. Here is my fiddle: <a href="http://jsfiddle.net/qheJQ/" rel="nofollow">http://jsfiddle.net/qheJQ/</a></p> <p>On that, I have three boxes: <strong>Slow Task</strong>, <strong>Different type of Task</strong> and <strong>Quick Tasks</strong> When anyone click on the <strong>Slow Task</strong>, the box will be expanded. If user click on <strong>Slow Task</strong> again, that box will be hidden. if user don't click again for hiding the <strong>Slow Task</strong> box and click <strong>Different type of Task</strong>, both the box will remain expanded. So, I want, when user click on <strong>Different type of Task</strong>, this box will be expanded and other boxes will be hidden if they are extended just like <a href="http://getbootstrap.com/javascript/#collapse-examples" rel="nofollow">this accordion</a>. </p> <p>How can I get this <strong>without using any plugin for accordion</strong>?</p> <p>My Script:</p> <pre><code>$('.title').click(function() { $(this).children('.arrow').toggleClass('arrow_up'); $(this).next('.box_expand').slideToggle(); }); </code></pre>