Click on the first article.
Use the n keyboard shortcut to go to the next article.
Then use the o keyboard shortcut to open the article description.
If you have issues, check out the hint!
Click Save & Submit Code to get started!
By =click=ing on the first-article,
you have put the pre-view-screen =on-focus=
and pressing the "o" and/or "n" keyboard-key will have an effect.....
Thanks very much
If you use $( )
you are using the so called jQuery selector
The selector will select ALL the HTML-Elements of the active HTML-page,
which have attribute you use as an argument.
Thus if you use
$(".article") you are selecting all the HTML-Element's
which have the class="article" set
( you will find 7 Article's)
The jQuery Selector will create an object
which will contain all those selected Elements. AND its children..
Talking in terms of DOM (=Document Object Model )
you select a parent and all its children which are in its tree
Here is the how the Document Object Model view looks like for
html | + - - - - - - + - - - - - -+ | | 3 7 head body | | + - + - + + - - - - - + - - - - - - + | | | | | 4 5 8 165 166 link link div script script .articles .container | + - - - + - - - + - + - + - - - + - - - + - - - + | | | | | | | 10 32 54 76 98 120 142 div div div div div div div < .article .current sibling's | .next() +- - - - - - - + - - - - - - - - + | | 77 88 .item .description div div | | + - - - - + - - - -+ + - - - - - + - - - - -+ | | | | | | 78 81 84 89 90 94 div div div div div div | + - - - + - - - + | | h1 p
The numbers in the Diagram
represent the line-number in the index.HTML file.
So to get to the articles we follow the path
html -> 7-body -> 8-div
(we landed at the PARENT of ALL the Articles)
Those Articles are the CHILDREN to this PARENT.
And the CHILDREN between themselves are SIBLINGS.
And ALL these CHILDREN are carrying the Class article.
In this Diagram i have
put the current Class on the 4th Article...
this would happen if you clicked on the 4th-Article
at wich point you have this article at your fingers via
$('.article').removeClass('current'); attribute class=current from all those Elements.
$(this).addClass('current'); this as the way to identify this Element, add the Class attribute "current", which via the style.CSS file will cause the change of color via the .current CSS-object,
but from now on if we use the jQuery Selection with the argument '.current'
like $('.current') , we know that we have selected 1 Article-Element, with ALL its CHILDREN
$(this).children('.description').show(); clicked-on Article and ALL its Elements, and from this collection of Elements, choose the Element with the Class "description" set, and show that Element and all its Children.