Question

I have the following javascript that shows or hides a div when a link is clicked:

<script type="text/javascript">
            $(document).ready(function(){               
               $('.show_hide').showHide({            
                    speed: 500,  // speed you want the toggle to happen 
                    changeText: 0, // if you dont want the button text to change, set this to 0
                    showText: 'View',// the button text to show when a div is closed
                    hideText: 'Close' // the button text to show when a div is open                                  
                });                 
            });

            (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 () {     
             // this var stores which button you've clicked
             var toggleClick = $(this);
             // this reads the rel attribute of the button to determine which div id to toggle
             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==1){
             $(toggleDiv).is(":visible") ? toggleClick.text(options.hideText) : toggleClick.text(options.showText);
             }
              });

          return false;

        });

    };
})(jQuery);
</script>

The problem is, I have two such divs, but I only want one to be displayed at a time. So, if someone clicks on the link to display div 2, and div 1 is already displayed, it should hide itself first before displaying div2.

Relevant HTML:

<div class="button"><a href="#" rel="#faq" class="show_hide">FAQs</a></div>
<div class="button"><a href="#" rel="#contact" class="show_hide">Contact</a></div>
<div id="faq" class="faq">FAQs here </div>
<div id="contact" class="faq">Contact form here </div>

I don’t have any experience with JS/Jquery, but I tried adding this code, which didn’t work:

             var otherDiv;

             if ($(this).attr('rel') == 'contact')
                otherDiv = 'faq';
             else
                otherDiv = 'contact';            

             if ($(otherDiv).is(":visible"))
                $(otherDiv).slideToggle(options.speed);

Answer 1

Most people use CSS classes as a place to store ‘metadata’. When a div becomes visible, add a class to it like “toggledVisible” or whatever. When a new toggle is clicked, find all instances of “toggledVisible”, hide them, and remove that class.

Alternatively, you always keep track of some sort of “currentlyVisible” object and toggle it.