toggle help

toggle help

Hi

I am trying to implement the toggle funtionality.

I have a list  of content headings and when the user clicks on a individual heading the content shows below the heading.

I also have a button on the top of the page that when clicked all the hidden content under each heading is expanded.

But when a user expands or closes a single heading content then decides to open everything the content already open will close.

Or if the user closes a single heading content then chooses to close the rest, the rest of the content closes but the one that was oringnally closed first opens.


I have manged to get it working a little but its not quite right, here is my code below
  1. $(document).ready(function(){

        $('.togg').hide();
        $('.expand').click(function () {
        $('.togg:hidden').toggle('slow');
        $('span').addClass('active');
        $('span').removeClass('expand');


        $('.active').click(function () {
            $('.togg:visible').toggle();
            $('span').addClass('expand');
            $('span').removeClass('active');
        });
           

        });
    });
















Thanks in advance for any help and advice