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:

$(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

Popular posts from this blog

Lab 23-2: Type Ahead

WBL Workshop 2