Programming my own a jQuery Accordion

EDIT:

            $('.edit').click(function(){
            //each time an edit class is clicked, show its associated hide div
            var aNum = $(this).attr('id');
            //get the number at the end of the ID of this particular edit div           
            aNum=(aNum.substring(aNum.indexOf('_')+1, aNum.length));

            //select and show the associated hide_1 div
            $('.hide').hide();
            $('.edit').show();          
            $('#hide_'+aNum).show();

            //hide $(this)
            $(this).hide();

            $(".content").slideUp();                
            $(this).parent().next(".content").slideDown();
        });

with the help of jammypeach here (http://stackoverflow.com/questions/6860486/jquery-find-multiple-associated-classes-using-the-last-digit-of-the-class) I've created this code to do what I want. It works with any div, a开发者_如何学Gond unlike most accordions, it allows me to have divs in between which are not part of the accordion without it breaking.

Start by using classes. I've made you a small accordion that simply hides the other's content when clicked. I hope you can take it from here ;-)

http://jsfiddle.net/Sa47A/

There are a tone of jquery accordian plugins available including the official one that's included in the jquery-ui (which I've personally used to great success). Why reinvent the wheel? Take a look at this article and pick one that works for your needs:

http://www.1stwebdesigner.com/freebies/jquery-accordion-menus-tutorials/