Simple Hide / Show jQuery

JavaScript
1

Hi all

I have a simple hide/show which shows the hidden message and changes the links text when the link is clicked, everything works but, my problem is when I click one link, all the hidden messages gets shown instead of just the one that I’ve clicked.

I need to add something like $(this).parent().show(); but I’m not sure where to put this or is there an easier way?

$(document).ready(function() {
        $('.message').hide();
        $('.hideshow').toggle(function() {
            $('.hideshow').text('Hide');
            $('.message').show('slow');
        }, function() {
            $('.hideshow').text('Show');
            $('.message').hide('slow');
        });
    });

<p><a href="#" class="hideshow">Show</a></p>
                        <div class="message">
                            some text here
                        </div>
<p><a href="#" class="hideshow">Show</a></p>
                        <div class="message">
                            some text here
                        </div>

Thanks, Barry

2

The problem is occurring because you are telling the script to affect everything on the page that matches the class name.

In the toggle function, the this keyword will refer to the link that was clicked, so you can work with only that one particular link with:


 $(this).text('Hide');

With the message, you want to restrict the selection to just the one that is next after the para that the link is in, so something like this would work:


$('.message', $(this).parent().next('div')).show('slow');
3

Thanks Paul

Now the message is not showing, please see my updated code.
I also need the .hideshow text to work in the same way… what do you suggest? Much appreciated :cool:

$(document).ready(function() {
        $('.message').hide();
        $('.hideshow').toggle(function() {
            $('.hideshow').text('Hide').addClass('black');
            $('.message', this.parent().next('div')).show('slow');
        }, function() {
            $('.hideshow').text('Show').removeClass('black');
            $('.message').hide('slow');
        });
    });

Thanks, Barry

4

Ahh, I have since made an edit to my post correcting it so that $(this) is used instead.

I suggest that you perhaps read the first half of my previous post again.

5

Yes Paul, I realized about the .hideshow text, things are working now, but still not showing the message?

code update:

$(document).ready(function() {
        $('.message').hide();
        $('.hideshow').toggle(function() {
            $(this).text('Hide').addClass('black');
            $('.message', $(this).parent().next('div')).show('slow');
        }, function() {
            $(this).text('Show').removeClass('black');
            $('.message', $(this).parent().next('div')).hide('slow');
        });
    });

Thanks, Barry

6

I think that jQuery selectors are selected from inside of the chosen context, so if we’re starting from the div it won’t select the .message class on that same div, only on what’s inside of the div.

So, either the HTML code needs to be restructured so that the show/hide is contained within the same block as the div, or the code needs to change.
If the code is to change it could be something like:


$(this).parent().next('div').show('slow');
7

:smiley:

Works perfect! Been working on this all night, thank you.

Couple of questions, if you have a minute Paul.

  1. There is no mention of .message, how does $(this).parent know it needs to select .message?
$(document).ready(function() {
        $('.message').hide();
        $('.hideshow').toggle(function() {
            $(this).text('Hide').addClass('black');
            $(this).parent().next('div').show('slow');
        }, function() {
            $(this).text('Show').removeClass('black');
            $(this).parent().next('div').hide('slow');
        });
    });

Thanks again, Barry

8

$(this).parent() takes it up to the paragraph element, and the next(‘div’) part then moves on down to the message that immediately comes after the paragraph.

Having .message is useful if there’s an outer context from which you can then select the message, but in this case with the way you have structured your HTML that’s not possible.
If the HTML were instead something that keeps the link and message in a separate area from the other ones, then using .message would be useful.

For example:


<div>
    <p><a href="#" class="hideshow">Show</a></p>
    <div class="message">some text here</div>
</div>
<div>
    <p><a href="#" class="hideshow">Show</a></p>
    <div class="message">some text here</div>
</div>

With that type of HTML code you can go up to the parent of the paragraph, then select the message from there.

I haven’t, no, but it’s an issue with your IDE which confuses the JavaScript from jQuery’s next method with Java’s Iterator.next method.
http://netbeans.org/bugzilla/show_bug.cgi?id=164400

You might be able to set up your IDE so that it doesn’t confuse Java with JavaScript, but it’s safe to ignore.

Not at all.

9

Quality! Thanks a lot Paul.
Really helped me tonight with the detailed explanations, appreciate your time thank you.

Until the next thread :slight_smile: