$16-2$ Experiment with the mobile website

In this exercise, you$$ll first test the mobile version of the Vecta Corp website that$$s presented in this chapter. Then, you$$ll make some modifications to it$.$

Open and test the mobile website for Vecta Corp

$1.$ Use your text editor to open the HTML page in this folder:

c:$\backslash$jquery$\backslash$exercises$\backslash$ch$16\backslash$vectacorp$\backslash$

Test this page and the navigation from one page to another within the site. In particular, use the list items in the list on the Solutions page to display information on the individual solutions, click the Back button in the header of a solution to return to the Solutions page, and click the About Us button in the navigation bar to display the About Us page.

$3.$ Click the Contact Us button in the navigation bar of the Home, Solutions, or About Us page to display the Contact Us page. Then, complete the form and click the Submit button to see what happens.

Change the switch on the Contact Us page to two radio buttons

$4.$ Replace the switch on the Contact Us page with a group of two horizontal radio buttons. Then, test this change to be sure it works.

$5.$ Change the code you just entered so the input element for each radio button is contained within the label element, and delete the for attribute for the label. Then, test this again.

Change the Solutions page so it uses collapsible content blocks

$6.$ Change the li elements in the list view on this page to div elements that have a data$-$role attribute set to $$collapsible$,$ and delete the ul element for the list view.

$7.$ Delete the element from the div elements you just added, but leave its content. Then, move the img element inside the h$3$ element before the text that element contains.

$8.$ Test this web page to see how it works. When you click one of the content blocks, the paragraph for that block should be displayed. Note that you can display all three of the content blocks at once. Also note that although the formatting for the headings could be improved, they$$re good enough for now.For

$9.$ Replace the element in each content block with the h$3$ and ul elements from the page for the associated solution. Now when you click on one of the content blocks, all the text that was previously included on a separate page should be displayed.

$10.$ Notice that each content block now starts with two h$3$ elements. Change the first h$3$ element in each block to an h$2$ element and test the page again. Because jQuery mobile always styles the headers the same way, their appearance won$$t change.

Here is the HTML code for this part:

$1$