Wrapping a function within another

Question

I am working on taking two divs, having them hidden on page load but having each drop down separately when one is clicked on. When one is active the other is hidden.

So far I have

$( '#div, #div1' ).hide(); {
$( "#div" ).click(function() {
$( "#div1" ).slideUp( "slow", function() {
// Animation complete.
});
});

But I am having trouble wrapping the click function within the initial one. The divs are being called by a picklist.

Can someone walk me through this? I would prefer a step by step example. I have very limited experience in writing jQuery and appreciate the help.

Here is the page link to which I am working on.

https://www.gdg.do/prod1/portal/portal.jsp?c=6696885&p=8296647&g=8297605

What I'm wanting to do, I want both 'Group' areas hidden on page load. Then once a selection is made in the drop down, the corresponding 'Group' slides down. When the other 'Group' is selected the first one disappears and the newly selected one is visible.

I hope that is clearer.

Answer 1

var $sliderDivs = $( '#div, #div1' );
$sliderDivs.click(function(e){
    $(this).slideDown("slow");
    $sliderDivs.not(this).slideUp( "slow", function() {
        // Animation complete.
    });
}

All jQuery event handlers set the context(what this is set to) to the element that fired the event.

The reason for saving a selector as a $-prefixed variable is that it is easier to maintain(changes only have to be made in one place), and it is faster(jquery traverses the dom every time you wrap a selector with $() )

EDIT: Against my better judgement I made you a quick example:

http://codepen.io/tpblanke/pen/hrlgL

Should get you where you need to be.