A Smarter Way to Learn jQuery

Fill in the blank to hide the element and prevent it from taking space.

.nowhere_element {
____________
}

display: none;

^ *display: none; *$

Fill in the blank to hide the element, leaving a blank space.

.invisible_element {
____________
}

visibility: hidden;

^ *visibility: hidden; *$

Fill in the blank to assign the class if it's not assigned and remove the class if it is assigned.

$(this)________("undisplayed");

.toggleClass

^ *\.toggleClass *$

Fill in the blank to assign the class "undisplayed" if it's not assigned and remove the class if it is assigned.

$(this).toggleClass______________

("undisplayed");

^ *$•undisplayed•$; *$

5. Drag-and-drop: Holding down the left mouse button, drag the pieces of code onto the screen to assign the class if it's not assigned and remove the class if it is assigned.

$("img#loris").toggleClass("undisplayed");

To the div whose id is "features" assign the class "show" if it's not assigned and remove the class if it is assigned.

$("div#features").toggleClass("show");

$`(`"`div`#`features`"`)`.`toggle`Class`(`"`show`"`)`;

An image selector has been assigned to the variable pic. Assign the class "show" if it's not assigned and remove the class if it is assigned.

pic.toggleClass("show");

Code a CSS class that hides all elements and eliminates their space. Make up the class name.

.inviz {
display: none;
}

^ *\..+ {\n *display: none;\n *} *$

Toggle the class of a div. Make up the div's id and the class name.

$("div#info").toggleClass("shown");

^ *\$$•div#.+•$\.toggleClass$•.+•$; *$

Toggle the class "shown" on all elements whose class is "temp".

$(".temp").toggleClass("shown");

^ *\$$•\.temp•$\.toggleClass$•shown•$; *$

In a single statement, swap one image for another by toggling a class. Make up the image ids and the class name.

$("img#pic_1, img#pic_2").toggleClass("shown");

^ *\$$•img#.+, img#.+•$\.toggleClass$•.+•$; *$

When either of two images is clicked on, toggle the class for both of them, so they're swapped. Code the toggle as a single statement. Make up their ids and the class name.

$("img#pic_1, img#pic_2").on("click", function() {
$("img#pic_1, img#pic_2").toggleClass("shown");
});

^ *\$$•img#(.+), img#(.+)•$\.on$•click•, function\($ {\n *\$$•img#\1, img#\2•$\.toggleClass$•shown•$;\n *}\); *$