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 Jake Porritt
Jake Porritt
10,356 Points

Stuck on this jQuery problem.

What I'm trying to achieve is when clicking on a h1 tag with the class of 'reveal_link' it reveals the next h1 element that has a class of 'hide' which I've used to hide with CSS.

I've got it to reveal the next element and remove the 'reveal_link' class and add it to the recently shown h1 element while removing the 'hide' class.

It works for the first one.

But then when I click on the new element the next one doesn't show and there is no change in classes.

Can anyone help?

Here is my code:

<div class="slides">
  <h1 class="reveal_link">Click me!</h1>
  <h1 class="hide">And now click me!</h1>
  <h1 class="hide">Hey! Don't forget about me.</h1>
  <h1 class="hide">Or me!</h1>
</div>  

$(document).ready(function() {
  $('.reveal_link').click(function() {
    //Remove the "hide" class from the next element
    $(".reveal_link").next().removeClass('hide');
    //Remove "reveal_link" class from element
    $('.reveal_link').removeClass('reveal_link');
    //Add "reveal_link" class to just appeared element
    $(this).next().addClass('reveal_link');
  });
});

h1 {
  text-align: center;
  cursor: pointer;
}

.hide {
  opacity: 0;
}
Marco Boretto
Marco Boretto
29,821 Points

hey jake can you post the css stylesheet?

be sure to include code using the Markdown:

this is an example

2 Answers

Tushar Singh
Tushar Singh
Courses Plus Student 8,692 Points

I think what you want is when you click on the particular h1 element, next element to show, check out my code, I think you will easily understand what I did:+1:

http://codepen.io/tushar_13/pen/eZrxBm

Check the class "abc"

<div class="slides"> 
    <h1 class="reveal_link abc"><a href="">Click me!</a></h1> 
    <h1 class="hide abc"><a href="">And now click me!</a></h1> 
    <h1 class="hide abc"><a href="">Hey! Don't forget about me.</a></h1> 
    <h1 class="hide abc"><a href="">Or me!</a></h1> 
</div>

 h1 {
    cursor:pointer;
  }
  .hide {
    display:none;
  }
  .reveal_link {
    display:block;
  }

$(document).ready(function() {
 $('.abc').click(function(e) {
    e.preventDefault();
     $(this).next().removeClass('hide').addClass('reveal_link');
    });
});
Jake Porritt
Jake Porritt
10,356 Points

Could you explain the purpose of the "e" please?

Marco Boretto
Marco Boretto
29,821 Points

The preventDefault() method cancels the event if it is cancelable, meaning that the default action that belongs to the event (in the above example 'e', in the one below 'event') will not occur.

For example, this can be useful when: Clicking on a "Submit" button, prevent it from submitting a form Clicking on a link, prevent the link from following the URL

see https://api.jquery.com/event.preventdefault/ for more

Tushar Singh
Tushar Singh
Courses Plus Student 8,692 Points

Hey jake, I used "e" here , and added "preventDefault()" to it. Well in simple words, it just cancel the defaults thing your browser would normally do.

I want you to remove this method and see what happens, what you will see is what you browser will do as a default action.

I seriously recommend you to go through the mdn pages and moreover do try to remove the preventDefault() method and actually see yourself what happens. Good Luck!

Marco Boretto
Marco Boretto
29,821 Points
Marco Boretto
Marco Boretto
29,821 Points

Hey jake, Have you added the jquery script? If so, try to Add a prevent default in The click event

give you an example:

$(document).ready(function() { 
    $('.reveal_link').click(function(event) { 
        event.preventDefault();
        //Remove the "hide" class from the next element 
        $(this).css('display','none');
        $(this).next().removeClass('hide').click(function(event) { 
            event.preventDefault();
            $(this).css('display','none');
            $(this).next().removeClass('hide').end();
        });

    }); 
});

be sure to add an anchor tag in each of the h1 element like so :

<div class="slides"> 
    <h1 class="reveal_link"><a href="">Click me!</a></h1> 
    <h1 class="hide"><a href="">And now click me!</a></h1> 
    <h1 class="hide"><a href="">Hey! Don't forget about me.</a></h1> 
    <h1 class="hide"><a href="">Or me!</a></h1> 
</div>

and the css like so:

 h1 {
    cursor:pointer;
  }
  .hide {
    display:none;
  }
  .reveal_link {
    display:block;
  }

Hope it helps