Lab7 - Simple Accordion
Link to Lab7
In this lab, we were assigned to make an accordion, which is basically a table with rows and when the mouse hovers over it another row appears. The JQuery code is below:
This lab uses the hide commands which does exactly what it says, it hide any element that it is assigned to. The next piece of code is actually what is in charge of allowing the accordion to work. It states that when the mouse hovers over the element "dl" that it would slide down the element "dd" and when it does not then it will slide up.
In this lab, we were assigned to make an accordion, which is basically a table with rows and when the mouse hovers over it another row appears. The JQuery code is below:
$(document).ready(function(){
$("dd").hide();
$(".answer").hide();
$("dl").on("mouseover", "dt", function(){
$(this).next()
.slideDown(300)
.siblings("dd")
.slideUp(300);
});
});This lab uses the hide commands which does exactly what it says, it hide any element that it is assigned to. The next piece of code is actually what is in charge of allowing the accordion to work. It states that when the mouse hovers over the element "dl" that it would slide down the element "dd" and when it does not then it will slide up.

Comments
Post a Comment