Designing the page

The left-hand side of the page will have jQuery UI's slider, spinner, and an accordion. The slider will be used to filter hotels based on price, and the spinner will control the zoom level of the map. The accordion will display the hotels such that the header of each accordion panel will display the hotel name and its content panel will have the hotel price and some description text. Write the following markup in the index.html file to create the HTML structure:

<html> <head> <meta charset="utf-8"> <title>Google Maps with jQuery UI</title> <link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.10.4.custom.min.css"> </head> <body> <div> <div class="left" > <div class="ui-state-highlight ui-corner-all" style="padding: 7px;"> ...

Get Mastering jQuery UI now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.