Close other panels before opening another

Question

I have looked around and around and I can't find or figure this out. Maybe I have seen something but wasn't sure how to integrate it into what I have...I'm not sure. I have decided to swallow my pride and ask. I am new to Javascript/jquery and I am stuck.

I have created a row of buttons that all slideDown a panel. I have all of the buttons working correctly with one thing missing. I would like only one panel to be open at a time. So, if one panel was open and I clicked on another button the open panel will slideUp and the next will slideDown.

If my scripting is a little ruff, any critique is much appreciated as well.

Thank you.

The link to the site is http://greenmountainfarmtoschool.org/dev_site/

And my jQuery:

jQuery(function ($) {

    $(document).ready(function() {

        $(function () {
            $('.action-btn').on('click', function () {
                var sliderID = $(this).attr('data-sliderid');
                if ($('.' + sliderID).is(":hidden")) {
                    $('.' + sliderID).slideDown("slow");
                } 
                if($(div).hasClass('down')) {
                    .slideUp("slow");
                }
                else {
                    $('.' + sliderID).slideUp("slow");
                }
            });
        });

    });//end of docready 

    $(window).load(function() { });//end of windowload

});//end of $ block 

Answer 1

So after Looking and learning about the jQuery's Tab UI, I couldn't figure out how to make it work for what I was trying to do. So a friend and I figured this snippet of code out. Thought I would post it for others to maybe use. Hope it helps someone sometime.

HTML:

<div class="section group">
<div class="col span_1_of_4 sub-btn hvr-reveal action-btn centerText" data-sliderid="ourPurposeSlider">
    <h3>Our Purpose</h3>
</div>
<div class="col span_1_of_4 sub-btn hvr-reveal action-btn centerText" data-sliderid="whereWeWorkSlider">
    <h3>Where We Work</h3>
</div>
<div class="col span_1_of_4 sub-btn hvr-reveal action-btn centerText" data-sliderid="staffSlider">
    <h3>Meet the Staff</h3>
</div>
<div class="col span_1_of_4 sub-btn hvr-reveal action-btn centerText" data-sliderid="boardSlider">
    <h3>Meet the Board</h3>
</div>

jQuery:

$(function () {
        $('.action-btn').on('click', function () {
            var sliderID = $(this).attr('data-sliderid');


            if( $('.active')[0] && !$('.' + sliderID).hasClass("active") ){
                $('.active').slideUp("slow", function(){
                    $(this).removeClass('active');
                    $('.' + sliderID).slideDown("slow").addClass("active");
                });
            }else if( $('.active')[0] && $('.' + sliderID).hasClass("active") ){
                $('.' + sliderID).slideUp("slow").removeClass("active");
            }else{
                $('.' + sliderID).slideDown("slow").addClass("active");
            };               

        });
    });

Answer 2

jQuery(function ($) {

$(document).ready(function() {

    $(function () {
        $('.action-btn').on('click', function () {
            /**
            * since all the sliders are also in a 'wrapper' class, just 
            * slideUp all the wrapper, then slideDown the one you want.
            */
            $('wrapper').slideUp("slow"); 

            var sliderID = $(this).attr('data-sliderid');
            if ($('.' + sliderID).is(":hidden")) {
                $('.' + sliderID).slideDown("slow");
            } 
            if($(div).hasClass('down')) {
                .slideUp("slow");
            }
            else {
                $('.' + sliderID).slideUp("slow");
            }
        });
    });

});//end of docready 

$(window).load(function() { });//end of windowload

});//end of $ block 

Another approach would be to use jQuery UI tabs and just style them since they already implement the behavior you want.