
Lab 7 was about creating an HTML accordion, where the user can hover over certain divs to make other divs open and close, similar to the movement of an accordion. Specifically, we had to make 10 study questions and answers about our favorite subject and make the accordion display them. In my HTML, I used 3 new tags: <dl>, <dt>, and <dd>. These 3 tags are used in conjunction with each other, <dl> defining a description list, <dt> describing a description term, and <dd> being the actual description. I set up one set of <dl> tags and put 10 <dt> and <dd> tags, using the <dt>s to display the question and <dd>s for the answers. In my CSS, I set the questions to look different from the answers and and the answers initially set to no display. In my JS, I used a jQuery function that would make the <dd> underneath a <dt> have a display when the user hovered over the <dt> above it, making the question to the answer display to the user.
These skills are important to a web designer because add an interesting aspect to displaying lists. Some lists can be very long and giving the user too much content can overwhelm them. In this lab, it would've been all 10 questions and answers, a total of 20 items, on the screen had we not implemented the accordion. However, by doing so, we allowed the user to see only what they wanted to see at a certain time. It doesn't overwhelm the user and makes for a more appealing experience.
Comments
Post a Comment