Need help with jQuery click function

Question

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 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 -->

Why not use the jquery-ui Accordion control rather than re-implementing it yourself? jqueryui.com/demos/accordion — James Kovacs
– James Kovacs, Commented Nov 17, 2010 at 17:35

rterrani · Accepted Answer · 2010-11-17 17:37:45Z

3

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

answered Nov 17, 2010 at 17:37

rterrani

5363 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Piyush Mattoo · Accepted Answer · 2010-11-17 18:09:12Z

2

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";
        }
    }

answered Nov 17, 2010 at 18:09

Piyush Mattoo

16.2k6 gold badges50 silver badges56 bronze badges

Comments

wajiw · Accepted Answer · 2010-11-17 17:38:36Z

1

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.

answered Nov 17, 2010 at 17:38

wajiw

12.3k17 gold badges56 silver badges73 bronze badges

Comments

Cubed Eye · Accepted Answer · 2010-11-17 17:38:15Z

0

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>

answered Nov 17, 2010 at 17:38

Cubed Eye

5,6314 gold badges53 silver badges66 bronze badges

Collectives™ on Stack Overflow

Need help with jQuery click function

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related