CODEWITHSUNDEEP
jquery
hnnnng
hnnnng

Reputation: 485

Show/hide multiple elements independently

I am using Andy Langton's show/hide jQuery code but looks like the code has some glitches when you use multiple toggles on the same page.

When using multiple Show/Hide it would not toggle to the correct word. It seemed to track the last toggle overall rather than the setting for each link. In other words, if I clicked 'More' on the first article, it would change to 'Less'. If I pressed 'More' on the next article without hiding the previous, it would stay at 'More', and if I try and hide the first article now, that word remained 'Less'.

This is the code I am using:

// Andy Langton's show/hide/mini-accordion - updated 23/11/2009
// Latest version @ http://andylangton.co.uk/jquery-show-hide
$(document).ready(function() {

    // choose text for the show/hide link - can contain HTML (e.g. an image)
    var showText='MORE ↓';
    var hideText='LESS ↑';

    // initialise the visibility check
    var is_visible = false;

    // append show/hide links to the element directly preceding the element with a class of "toggle"
    $('.toggle').prev('.moree').append('<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);
    //$(this).html( ($(this).html() == hideText) ? showText : hideText);

    // toggle the display - uncomment the next line for a basic "accordion" style
    //$('.toggle').hide();$('a.toggleLink').html(showText);
    $(this).parent().next('.toggle').toggle('slow');

    // return false so any link destination is not followed
    return false;

    });
    });

Any help to fix this would be appreciated.

Marz

Upvotes: 1

Views: 2832

Answers (4)

adeneo
adeneo

Reputation: 318182

Did some rewriting, and this made more sense :

$(function() {
    var showText = 'MORE &darr;',
        hideText = 'LESS &uarr;';

    $('.toggle').hide().prev('.moree')
                .append('<a href="#" class="toggleLink">' + showText + '</a>');

    $('a.toggleLink').click(function(e) {
        e.preventDefault();
        var is_visible = $(this).closest('.moree').next('.toggle').is(':visible');
        $(this).html(is_visible ? showText : hideText)
               .parent().next('.toggle').toggle('slow');
    });
});​

FIDDLE

Upvotes: 1

Abhishek
Abhishek

Reputation: 836

Problem in code is

Use of same var is_visible to toggle elements.

We have to check visibility of corresponding div every time we toggle the visibility of content.

    $(this).html( ($(this).parent().next('.toggle').is(":visible")) ? showText : hideText);

See it in action

Upvotes: 1

Dirk
Dirk

Reputation: 1020

the problem is the boolean is_visible. if you click on the first link its set to false. if you click on the second element (without clicking on the first one again) its still false.

Upvotes: 0

redDevil
redDevil

Reputation: 1919

the code actually had a single flag for checking visibility of all the hidden DIVs. Need to check whether the particular div being toggled is currently hidden or not

    // change the link depending on whether the element is shown or hidden
    if( $(this).parent().next(".toggle").is(':visible') ) {
              $(this).html(showText);
    }
    else{
              $(this).html(hideText);   
    }

i have updated the fiddle to check this

updated jsfiddle

Upvotes: 0

Related Questions