jQuery // 8: WHEN A USER CLICKS THE LINK WITH THE ID “outerwear_man”, HIDE THE E

Question

jQuery

// 8: WHEN A USER CLICKS THE LINK WITH THE ID “outerwear_man”, HIDE THE ELEMENTS WITH CLASS “woman”

// 9: THAT’S KIND OF ABRUPT. INSTEAD, UPDATE #8 SO THAT THE ELEMENTS WITH CLASS “woman” FADE OUT IN 5 SECONDS (500 milliseconds)

// 10: WHEN A USER CLICKS THE LINK WITH THE ID “outerwear_woman”, SLIDE UP THE ELEMENTS WITH THE CLASS “man”

// 11: UPDATE #9 & #10 SO THAT WHEN MEN ARE HIDDEN, WOMEN ARE SHOWN AND WHEN WOMEN ARE HIDDEN, MEN ARE SHOWN

// 12: ADD A CLICK EVENT TO THE ELEMENT WITH THE ID OF “outerwear_all” SO THAT ALL OF THE ELEMENTS WITH CLASS “outerwear” ARE DISPLAYED

// 13: UNCOMMENT THE COMMENTED BIT OF CSS. ADD A HOVER EVENT TO EACH ELEMENT WITH THE “outerwear” CLASS THAT SHOWS THE NEXT “em” ELEMENT

// 14: COMMENT OUT THE JQUERY IN #13. ADD A HOVER EVENT TO EACH ELEMENT WITH THE “outerwear” CLASS THAT ANIMATES THE NEXT “em” ELEMENT (INSTEAD OF JUST SHOWING AND HIDING)

// 15: ADD A CLICK EVENT TO THE ELEMENT WITH ID OF “outerwear_jacket” THAT HIDES OTHER COAT TYPES (“trench,” “bomber”)

// CHECK EACH ELEMENT WITH CLASS “outerwear”. IF IT DOES NOT CONTAIN THE “jacket” CLASS, HIDE THE ELEMENT

Explanation / Answer

//8

$("#outerwear_man").click(function(){
    $(".woman").hide();
});

//9

$("#outerwear_man").click(function(){
    $(".woman").hide(5000);
});

//10

$("#outerwear_woman").click(function(){
    $(".man").slideUp();
});

//11

$("#outerwear_man").click(function(){
    $(".woman").hide(5000);

$(".man").show();

});

$("#outerwear_woman").click(function(){
    $(".man").hide(5000);

$(".woman").show();
});

//12

//13

//14

//15

//16

if (!$( this ).hasClass("jacket")

$(this).hide();

});

Related Questions

Navigate

• Browse (All)
• Browse J
• Subjects

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.