JQuery Toggle Between multiple divs

Question

I'm trying to toggle between divs so that when an tag is clicked a div will show. When another a tag is clicked, the div will replace the div shown.

This is what I did.

HTML:

<a href="#" rel="#slidingDiv">a</a><br>
<a href="#" rel="#slidingDiv_2">b</a><br>
<a href="#" rel="#slidingDiv_3">c</a><br>
<a href="#" rel="#slidingDiv_4">d</a><br>

<div id="slidingDiv">a</div>
<div id="slidingDiv_2">a</div>
<div id="slidingDiv_3">a</div>
<div id="slidingDiv_4">a</div>

JQUERY:

function ($) {
$.fn.showHide = function (options) {

    //default vars for the plugin
    var defaults = {
        speed: 1000,
        easing: '',
        changeText: 0,
        showText: 'Show',
        hideText: 'Hide'

    };
    var options = $.extend(defaults, options);

    $(this).click(function () { 

                var toggleDiv;

                var $divA = $('#slidingDiv'),
                    $divB = $('#slidingDiv_2'),
                        $divC = $('#slidingDiv_3'),
                        $divD = $('#slidingDiv_4'),
                        $divE = $('#slidingDiv_5'),
                        $divF = $('#slidingDiv_6'),
                        $divG = $('#slidingDiv_7'),
                        $divH = $('#slidingDiv_8'),
                        $divI = $('#slidingDiv_9');

                if( $divA.is( ':visible' ) ){
                        $divA.hide();
            }
                if( $divB.is( ':visible' ) ){
                        $divB.hide();
            }
                if( $divC.is( ':visible' ) ){
                        $divC.hide();
            }
                if( $divD.is( ':visible' ) ){
                        $divD.hide();
            }
                if( $divE.is( ':visible' ) ){
                        $divE.hide();
            }
                if( $divF.is( ':visible' ) ){
                        $divF.hide();
            }
                if( $divG.is( ':visible' ) ){
                        $divG.hide();
            }
                if( $divH.is( ':visible' ) ){
                        $divH.hide();
            }
                if( $divI.is( ':visible' ) ){
                        $divI.hide();
            }

                // this reads the rel attribute of the button to determine which div id to toggle
                toggleDiv = $(this).attr('rel'); 


      $('.toggleDiv').slideUp(options.speed, options.easing);   

                // this var stores which button you've clicked
      var toggleClick = $(this);

          var toggleDiv = $(this).attr('rel');

              // here we toggle show/hide the correct div at the right speed and using which easing effect
          $(toggleDiv).slideToggle(options.speed, options.easing, function() {
            // this only fires once the animation is completed
                // if(options.changeText==0){
              //$(toggleDiv).is(":visible") ? toggleClick.text(options.hideText) : toggleClick.text(options.showText);
               //}

          });

      return false;

    });

};
})(jQuery);

This currently works, but I know that this can be done better instead of using the if statement.

Thanks

Answer 1

Here we go: http://jsfiddle.net/fqK36/5/

Your whole function becomes:

$.fn.showHide = function (options) {

    //default vars for the plugin
    var defaults = {
        speed: 1000,
        easing: '',
        changeText: 0,
        showText: 'Show',
        hideText: 'Hide',
        slideDiv: '.slide-div'
    };
    var options = $.extend(defaults, options);

    return this.each(function () {
        $(this).click(function () {
            $(options.slideDiv).hide();
            // this var stores which button you've clicked
            var toggleClick = $(this),
                toggleDiv = $(this).data('slide-id');
            // here we toggle show/hide the correct div at the right speed and using which easing effect
            $(toggleDiv).slideToggle(options.speed, options.easing, function () {
                // this only fires once the animation is completed
                // if(options.changeText==0){
                //$(toggleDiv).is(":visible") ? toggleClick.text(options.hideText) : toggleClick.text(options.showText);
                //}

            });


        });

    });

};

Then you can use it like this:

$('a').showHide({'slideDiv' : '.slide-div'});

The slideDiv option can be a custom selector you're using can the divs you wish to slide.

All slides are assigned a class which means you can hide them all at once. Then you can show the targeted div by getting the clicked link's data-slide-id attribute.

Answer 2

Generally, I do this by creating a hidden class. When you go to switch to a new div, you can do something like this:

$(this).click(function(){
    $(this).removeClass('hidden') 

    $('div:not(#' + $(this).attr('id') + ')').addClass('hidden')
});

This uses the not selector to find everything but your current item. Sans animation, this is the simple way to do it. You can also grab whatever is not hidden by using $('div:not(.hidden)') and then run your toggle on everything in that selector.

$(this).click(function(){

    if($(this).hasClass('hidden'){
        $(this).show()

        $(this).removeClass('hidden')
    }

    $('div:not(#' + $(this).attr('id') + ') :not(.hidden.)')
        .hide().addClass('hidden')
});

Might help clean things up a bit.