Question: Q2 (35Pts) Write a jQuery application that changes the appearance and behavior of the container with accordion class (Fig2a). You can start from q2.html. After

Q2 (35Pts) Write a jQuery application that changes the appearance and behavior of the container with "accordion" class (Fig2a). You can start from "q2.html". After clicking the "Transform" button, it hides the button and turns the container to an accordion user interface (Fig2b). Check out video/q2.mp4. For the background, you can use the following colors: #CCC (hover), #AAA (click), #DDD (normal). Width of the container is 450px. Heights of "h3 elements are 50px, cursor is pointer" on h3. Use approximate margins and paddings. Use jQuery "slideDown" and "slideUp effects on paragraph objects. Transform HTML Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima id quis aut? Quam veritatis quas fuga beatae? Eveniet quae debitis veniam, pariatur fuga consectetur, iure ab deserunt unde sunt officiis.Officia esse, incidunt quam corporis rerum eligendi mollitia laboriosam excepturi itaque beatae, saepe, nihil repudiandae tenetur eaque? Sed magni quis dolorum vero illum, perferendis consequuntur quaerat, optio incidunt eligendi ex! CSS HTML CSS Javascript Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima id quis aut? Quam veritatis quas fuga beatae? Eveniet quae debitis veniam, pariatur fuga consectetur, iure ab deserunt unde sunt officiis Officia esse, incidunt quam corporis rerum eligendi mollitia laboriosam excepturi itaque beatae, saepe, nihil repudiandae tenetur caque? Sed magni quis dolorum vero illum. perferendis consequuntur quaerat, optio incidunt eligendi ex! Javascript Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima id quis aut? Quam veritatis quas fuga beatae? Eveniet quae debitis veniam, pariatur fuga consectetur, iure ab deserunt unde sunt officiis.officia esse, incidunt quam corporis rerum eligendi mollitia laboriosam excepturi itaque beatae, saepe, nihil repudiandae tenetur e ur eaque? Sed magni quis dolorum vero illum, perferendis consequuntur quaerat, optio incidunt eligendi ex! Fig2a: Initial Appearance Fig2b: After click
Step by Step Solution
There are 3 Steps involved in it
Get step-by-step solutions from verified subject matter experts
