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/