Need help with jQuery click function

Hey guys, I have a simple question (hope is simple). I have created sort of an accordion but I need to something like if button is clicked, slide down the content and else if button is clicked again slide up the content, please find below what I have done so far. Thanks for your help in advance.

    $('#experiences').click(function () {
        var cb = function () {
            $('#experiences').addClass('active');
            $('#hiddenExperiences').slideDown();
            $('#addExperiences').fadeIn();
            return false;
        }
        closeFilters(cb);
        return false;
    });

    $('.btn-close').click(function () {
        var cb = function () {
            return false;
        };
        closeFilters(cb);
        return false;
    });

   function closeFilters(callbackFunc) {
     $(".active").removeClass("active");
     $(".add-filters").fadeOut(250);
     $(".hidden-filters").slideUp("slow", callbackFunc);
   }

<div class="heading" id="experiences">
                        <p><a href="#">Experiences</a></p>                   
                    </div><!--heading-->
                  <div class="filter">
                    <div class="hidden-filters" id="hiddenExperiences">
                        <p>Filtering by:</p>
                        <ul开发者_Go百科 class="curr-filter"></ul>
                    </div><!-- hidden-filters -->
                    <div class="add-filters extra-width" id="addExperiences">
                        <div class="inner">
                            <a href="#" class="btn-close"></a>
                            <h4 class="title-filtery">Filtery By:</h4>

                            <div class="btn-holder clearfix">                               
                                <input type="button" class="btn-update" value="" />
                            </div>
                      </div>
                    </div><!-- filters -->
                </div><!-- filter -->

See this method http://api.jquery.com/slideToggle/ and this event http://api.jquery.com/toggle-event/

You can perform this in Javascript onClick of the button something like this:

function toggle_visibility(id) {
        var e = document.getElementById(id);
        if(e.style.display == "inline") {
            e.style.display = 'none';
        }
        else if(e.style.display == "none") {
            e.style.display = "inline";
        }
    }

Looks like you're adding the .active class to all elements with id=experiences

$('#experiences').addClass('active');

You need to find the element that got clicked and pass that through.

var tgt;
    $('#experiences').click(function (event) {
        tgt = $(event.target);
        var cb = function () {
            $(tgt).addClass('active');
            $('#hiddenExperiences').slideDown();
            $('#addExperiences').fadeIn();
            return false;
        }
        closeFilters(cb);
        return false;
    });

I'm not sure how your expand works, but that's where you're going to need to look.

I used this is another project I was doing, it may be of some assistance

JS:

$('.container .ui-widget-header').click(function(){$(this).parent().children('.ui-widget-content').slideToggle()});

HTML:

<div class="container">
    <div class="ui-widget-header">Title</div>
    <div class="ui-widget-content">Content</div>
</div>
<div class="container">
    <div class="ui-widget-header">Title2</div>
    <div class="ui-widget-content">Content2</div>
</div>