SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Simple Hide / Show jQuery

    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?

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

    Code HTML4Strict:
    <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
    The more you learn.... the more you learn there is more to learn.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,718
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by computerbarry View Post
    I need to add something like $(this).parent().show(); but I'm not sure where to put this or is there an easier way?
    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:

    Code javascript:
     $(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:

    Code javascript:
    $('.message', $(this).parent().next('div')).show('slow');
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

    Code JavaScript:
    $(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
    The more you learn.... the more you learn there is more to learn.

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,718
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by computerbarry View Post
    Thanks Paul

    Now the message is not showing, please see my updated code.
    Ahh, I have since made an edit to my post correcting it so that $(this) is used instead.

    Quote Originally Posted by computerbarry View Post
    I also need the .hideshow text to work in the same way... what do you suggest?
    I suggest that you perhaps read the first half of my previous post again.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes Paul, I realized about the .hideshow text, things are working now, but still not showing the message?

    code update:

    Code JavaScript:
    $(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
    The more you learn.... the more you learn there is more to learn.

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,718
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    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:

    Code javascript:
    $(this).parent().next('div').show('slow');
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)


    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?

    Code JavaScript:
    $(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
    Last edited by computerbarry; Dec 11, 2011 at 18:05. Reason: net beans bug, not a issue
    The more you learn.... the more you learn there is more to learn.

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,718
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by computerbarry View Post


    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?
    $(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:
    HTML Code:
    <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.

    Quote Originally Posted by computerbarry View Post
    2. I'm using NetBeans as my text editor and it says "Function Iterator.next is not supported by all your targeted browsers", have you come across this before?
    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.

    Quote Originally Posted by computerbarry View Post
    Is this a IE issue?
    Not at all.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quality! Thanks a lot Paul.
    Really helped me tonight with the detailed explanations, appreciate your time thank you.

    Until the next thread
    The more you learn.... the more you learn there is more to learn.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •