Chapter 3. Creating a Website Tour

By now, we have become familiar with the extremely useful draggable and droppable components of jQuery UI, both of which were used in the previous chapter. We will now explore some other components in this chapter that will prove to be a valuable asset in your web development toolbox. We will learn practical usage of the dialog, tooltip, and accordion components together.

If you change the layout of your website, it becomes difficult for regular users to navigate the new website initially. This might also mean a loss of visitors, if users find difficulty in searching for specific links or sections of the website they were familiar with earlier.

We will address this problem in this chapter and solve it by creating a website tour for a page. We will first design a simple home page for an imaginary company, and then create the tour to navigate different sections in the page. We will place a Take a Tour button on the page. Clicking on this button will...