Lab 7

During lab 7 we had to choose a subject in school and create questions and answers for it to help us study. The point of the lab was to create a web page in where once the question is hovered the answer would appear like an accordion. First in order to begin this lab we had to create a description list using the <dl> tag as the beginning. After this followed the <dt> tag that helps defines a term in a description list. Finally after followed the <dd> tag that is the description of the term. Once this list was created you would add css to it to add the visually appealing details. Then finally in order to get the hover over each item in the list you would add the javascript. Every <dd> tag contained a class of "answer" so that way when you add the javascript code it affects all. The code used was:                  $(document).ready(function() {
 $('dd').hide();
 $('.answer').hide();
 $('dl').on('mouseover', 'dt', function() {
$(this).next().slideDown(300).siblings('dd').slideUp(300);
});
});

This executed allowed every time it was hovered over with the mouse it would slide up or down depending on whats being hovered. As a web design student this is very useful because if i wanted to add this to a website it would allow for unique transitions between questions or responses on the site.