Hi all

I am using jQuery to toggle the visibility of some divs and at the
same time the content of the 'toggler' links.

Each time you click on a '.show_profile' link you show/hide a
'.directors_details' div.

At the same time, when you click on the above mentioned link

- the class of the link changes from 'show_profile' to 'hide_profile'
and back
- part of the text in the link changes from 'show' to 'hide' or from
'hide' to 'show'.



Most of this code works, but the confusing bit is the show/hide
replacing text.

It works only the first time you click on the button (changes from
'show' to 'hide'), while it remains almost always 'Hide' in all the
following clicks.
The if/else condition is not working correctly, as if all the
'.show_profile' links texts were checked and the 'show' condition was
almost always verified .
Is it the existence of several links with the same '.show_profile'
class that actually creates problems?


Everything else (toggling the class of the link and the visibility of
the div) works perfectly.


Hope it makes sense.


Any idea? Or better ways to toggle part of the link text?

Many many many thanks :)

Francesca



This is the code:




$('.show_profile').click(function() {

        // toggle visibility profile

        $(this).parent().next('.directors_details').toggle();

        // toggle link class to change the arrow background image

        $(this).toggleClass("hide_profile");

        // change show/hide text in the link    ----> this is the part that
doesn't work correctly

        if( $('$(this):contains("Show")').length > 0) {
                $(this).text($(this).text().replace('Show','Hide'));
        }else{
                $(this).text($(this).text().replace('Hide','Show'));
        }


return false;

});

Reply via email to