7. The o shortcut Interactive Website: News Reader

jquery

#1

The o shortcut
I have tried to follow all instructions, but still receiving error, please help:

var main = function() {

$('.article').click(function(){
$('.article').removeClass('current');
$('.description').hide();

`$(this).addClass('current');`
`$(this).children('.description').show();;`

});

$(document).keypress(function(event){
if(event.which === 111){
$('.current').children('.description').toggle();
}
});

<div class="article">
<div class="item">

</div>

`<div class="description">`
`description.hide();`

</div>
</div>

};
$(document).ready(main);


These are the instructions: for
Inside the keypress event handler, write an if statement:

  1. The if statement should check whether event.which === 111.

  2. If it does, then toggle the current article's description using:
    $('.current').children('.description').toggle();

  3. It is important you click on the first article before pressing the o key!
    The o key currently works for the first article's description. Let's add add another keyboard shortcut to move on to the next article.

This hint provides this information:

Modify your keypress event handler to look like this:

$(document).keypress(function(event) {
if(event.which === 111) {
$('.current').children('.description').toggle();
}
});

  1. First $('.current') selects the current article.

  2. The .children('.description') method selects the <div class="description">..</div> inside the current article.

  3. The .toggle() method alternates showing and hiding the description.

Many thanks for your help in advance :blush:


#2

Hey Mehreen95,

This is probably one of the most complete help requests I've ever seen!
You seem to be mixing HTML (<div class="...">) and JavaScript/jQuery together. Make sure you're keeping HTML in index.html and the JavaScript stuff in app.js. After you do that, could you post back with your code again please?


#3

2 posts were split to a new topic: "It looks like the o key isn't opening a description" error on exercise 7


#4

Thanks for your help @zystvan ! :slight_smile:
You're right, All I had to do was remove the HTML code, and it works fine !


#5

A post was split to a new topic: Need help finding the syntax error


#6