use jQuery to create a tabbed web page, dialog boxes, accordion panels and tooltips.Description:For this lab, you will be modifying 2 product display pages to use jQuery UI widgets.First you will modify the mums page from lab 9 to include tooltips to display the titles for the images in the gallery section as well as a zone map when the user hovers over the Zone text on the page. Then you will divide the page into 3 panels to displayed in an accordion format where the user can open and close the individual panels by clicking on the associated title.Second, you will modify the roses.html page (attached with images to this lab), to include 2 dialog boxes: 1 to display when the page loads and another when the user clicks on the Zone span tag on the page. Then you will organize the page into 3 tabbed panels which will display one at a time. The user can select the panel to be displayed by clicking on the associated tab.Requirements:Download the jQuery ui files using a theme of your choice and add to mums.html and roses.html.
use the mums.html folder from lab 9 to add tooltips and accordion panels.
Tooltips
Add titles to each of the images in the gallery section of the page.
Add the tooltips function to any element on the page with a tooltip
Add a custom class and change the styling as you see fit.
Add a span tag around the word Zone in the Plant Details table. Give it an id and a title.
Add the tooltips method to the Zone id tag, but add a link to the hardiness.jpg image as the content for the tooltip. (image is included in the download files for this assignment.
Accordion
Modify the div tag that is just above the h2 element for Plant Overview to include an id
Apply the accordion method to the id.
Add 2 customizations of your choice (css or options)
For the roses.html file attached to this assignment, add dialog boxes and tabs
Dialog
Call the dialog method for the #sale div at the bottom of the page to display the dialog when the page loads
Call the dialog method for the #zone div at the bottom of the page but prevent it from displaying when the page first loads
Add a click event to the #zonePopup span tag (Zone in the Plant Details panel) to open the #zone dialog.
Tabs
Add the tabs method to the #tabs div that includes the ul for the tabs.
Add 2 customizations of your choice (css or options)
Add links between the 2 pages.