jquery + Simple Toggle Script +在一个站点上使用多次

Question

I have modified this script a little bit to my needs, but now i have come across a problem, which I cant find a solution for.

HTML:

<div  class="toggle">

<p>Grumpy wizards make toxic brew for the evil Queen and Jack.</p>

</div><!-- end .toggle -->

<div class="readMoreDiv">    </div><!-- end .readMoreDiv -->


<div  class="toggle">

<p>Grumpy wizards make toxic brew for the evil Queen and Jack.</p>

</div><!-- end .toggle -->

<div class="readMoreDiv">    </div><!-- end .readMoreDiv -->

Script:

$(document).ready(function() {


    // Andy Langton's show/hide/mini-accordion - updated 23/11/2009
    // Latest version @ http://andylangton.co.uk/jquery-show-hide
    var showText='down';
    var hideText='up';

    // initialise the visibility check
    var is_visible = false;

    // insert Show/hide links in the readMoreDiv
    $('.toggle').next('.readMoreDiv').html('<a href="#" class="toggleLink">'+showText+'</a>');

    // hide all of the elements with a class of 'toggle'
    $('.toggle').hide();

    // capture clicks on the toggle links
    $('a.toggleLink').click(function() {

        // switch visibility
        is_visible = !is_visible;

        // change the link depending on whether the element is shown or hidden
        $(this).html( (!is_visible) ? showText : hideText);

        // toggle the display
        $(this).parent().prev('.toggle').slideToggle();
        return false;
    });


});

See it in action here: http://jsfiddle.net/CeBEh/

As you can see on Fiddle, the script works good when you are opening and closing just one div. But as soon you start opening and closing the second div, WHILE the first one is still open, the problems begin....

I would just like to have it work at all times, no matter if no or all divs are currently open.

Thanks!

Answer 1

Get rid of the is_visible flag and change the code in the click function to this:

var toggleDiv = $(this).parent().prev('.toggle');
// change the link depending on whether the element is shown or hidden
$(this).html(toggleDiv.is(":visible") ? showText : hideText);

// toggle the display
toggleDiv.slideToggle();

http://jsfiddle.net/CeBEh/3/

Answer 2

The problem is your is_visible variable which you use in both your callbacks. Any a.toggleLink will change that value. Try using an extra class to identify if the div is visible or not, or something else.

Answer 3

http://jsfiddle.net/CeBEh/1/

Remove is_visible and check the actual text of the clicked link.

Answer 4

What if you do it this way instead:

Html:

    <div>
        <p class='toggleMe'> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
        <a class="toggle">
            Hide box
        </a>
    </div>
    <div>
        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
        <a class="toggle">
            Hide box
        </a>
    </div>

javascript:

    $(document).ready(function(){
          $('.toggle').click(function(){
                $(this).parent().find('p').toggle();
                $(this).text($(this).text() == 'Show box' ? 'Hide box' : 'Show box');
            });
        });