jQuery一次仅显示一个div

Question

I'm using a jQuery plugin to show/hide divs but I'm not sure how to get it to only show one div at a time, so when I click the link to show a div, it hides all the other ones currently open and shows only the most recent one clicked.

Here is the 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 () { 
         $('.toggleDiv').slideUp(options.speed, options.easing);    
         // 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);

And this is the class you add to a link to make a div show/hide:

$(document).ready(function(){
$('.show_hide').showHide({           
    speed: 1000,  // speed you want the toggle to happen    
    easing: '',  // the animation effect you want. Remove this line if you dont want an effect and if you haven't included jQuery UI
    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
}); 
});

Which would be used with:

<a class="show_hide" href="#" rel="#slidingDiv">View</a></pre>
<div id="slidingDiv" class="toggleDiv" style="display: none;">Content</div>

Anyone got any ideas how to make it to only allow you to open one at a time? As currently it is allowing multiple divs to be open at the same time!

Thanks in advance!

Answer 1

There's this thing called jQuery UI Accordion. With a call of a function, jQuery will automatically transform your list of div s into an accordion. An accordion is a show/hide mechanism that only shows one div at a time.

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="http://code.jquery.com/ui/1.11.4/themes/cupertino/jquery-ui.css" rel="stylesheet"/> <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script> <div id="accordion"> <h3>Div #1</h3> <div> <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p> </div> <h3>Div #2</h3> <div> <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p> </div> <h3>Div #3</h3> <div> <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p> </div> <h3>Div #4</h3> <div> <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p> </div> <h3>Div #5</h3> <div> <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p> </div> </div> <script> $("#accordion").accordion(); </script>