Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Jim McQuarrie
Jim McQuarrie
10,597 Points

Can anyone tell me why my show hide text is coming up backwards?

$(document).ready(function(){
  $('#table tbody tr:even').addClass('zebra');
  $('<p>A new paragraph</p>').addClass('new').insertAfter('#text');

  //hide and show text using the click from button
  $('#hideButton').click(function(){
    $('#text').slideToggle();

    //changes button text
    if ($('#text').is(':visible')) {
      $(this).val('Hide');
    } else {
      $(this).val('Show');
    } 
  });
});

It works like this:

$(document).ready(function() {
  $('#toggleButton').click(function() {
    $('#text').toggle();

      if ($('#text').is(':visible')) {
      $(this).val('Hide')
      } else {;
      $(this).val('Show')
      }
 } );  
} );
Samuel Webb
Samuel Webb
25,370 Points

Does this mean you now have the correct answer?

Jim McQuarrie
Jim McQuarrie
10,597 Points

Here is a video it will explain better. http://www.screencast.com/t/rBdATtpqt

3 Answers

Sergio Alen
Sergio Alen
26,726 Points
Sergio Alen
Sergio Alen
26,726 Points

you've got a few syntax errors, remove the semicolon after the else statement and add semicolon after the .val(); check if that fixes it.

It's a good idea to get used to using the inspector in your browser developer tools, check there first if you have any errors, there's also lots of syntax validators online, check out jsfiddle.net

When debugging I put alerts in every step inside my code to check if it passes or not.

Jim McQuarrie
Jim McQuarrie
10,597 Points

no luck on the fix, I am going to start over on this one, it has to be something I missed.

Thanks, Jim

Jim McQuarrie
Jim McQuarrie
10,597 Points
Jim McQuarrie
Jim McQuarrie
10,597 Points

I do not have the correct answer yet, but I went back and rebuilt and have the same issue, I made a quick video http://www.screencast.com/t/rBdATtpqt The video will show you exactly what is happening.

Sergio Alen
Sergio Alen
26,726 Points
Sergio Alen
Sergio Alen
26,726 Points

Hi Jim, I think the reason why it doesn't change the value in your button is because the event toggle when its set to 'slow', the sequence enters the if statement and the toggle animation still hasn't finished and its still 'visible'.

Try putting the if statement in the 'complete' callback function for toggle http://api.jquery.com/toggle/

like this:

$('#text').toggle('slow', function() {
    if ($('#text').is(':visible')) {
      $('#hideButton').val('Hide');
    } else {
      $('#hideButton').val('Show');
    } 
});
Sergio Alen
Sergio Alen
26,726 Points

so, that will wait for the animation to complete and then proceed to the if statement. hopefully that works.

Jim McQuarrie
Jim McQuarrie
10,597 Points

Thank for trying, but I cant get that to work either, really strange!