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