A fairly common web interface feature is the dynamic view switcher. On product pages or blog archives you’ll sometimes find buttons to change the layout from display lists to smaller grids. In this tutorial I’ve built a simpler example using basic CSS and some jQuery commands.

I’ll be using interface elements from the Zephirro E-Commerce UI Set which include buttons and thumbnail photos. Feel free to demo the code yourself and try out a similar experience on your own website. This is a tricky effect to nail down, but when done properly your users will love the unique experience.

Live Demo – Download Source Code

The main page isn’t very complicated but does contain a lot of repetitive code. Towards the top I’ve included two links with the IDs listview and gridview.

We’ll bind a click event handler onto these two links later on. Then we can determine which display block the user clicks and how we need to render the page. Afterwards I’ve setup an unordered list with each list item containing a different product to display. The list item element is used as a block which contains more detailed elements.

This example only includes the first row but you can copy/paste to build more. In my demo I’ve used 9 different product rows containing the left and right columns.

Just to point out I’ve wrapped the product buttons in a span with the class .darkview. This is used in the grid layout to hide the big round buttons until you hover over a product display. But in the default list view it doesn’t affect anything. Notice, however, that it’s very important we setup the HTML properly from the start.

My project outline is to adapt each list item based on the UL’s current class. Using jQuery we can change it between list and grid, then apply styles for each. The list is setup first by default and I’ve kept all the related selectors in the same block of code.

Now the grid view is very similar with the exception of our dark hover menu. The title, product ID, and price elements are styled very similar to the original list design. I’m also switching out thumbnail images to display larger grid blocks.

A particularly interesting bit of code is the darkview class for our grid layout. This span is originally set to 0 opacity and transitions into full display. For some people this layout may be annoying or intimidating – but there’s always a workaround to adapt this functionality for your own website.

I am including the latest jQuery release directly from Google’s cloud hosting for developers. I then created a new script.js file and we can write all our main function code inside. Let’s look at the opening bind method:

Once the document is loaded jQuery will bind a click event handler to any anchor links with the class.switcher. We want to disable linking to anything and prevent the default browser action. Then afterwards I go on to setup a few variables which will save us time writing out selectors.

We need theid in order to determine which view style we’re switching over to display. Also the two thumbnail image URLs help to update the grid/list view later on.

The final portion of my code uses a couple basic if/else clauses. First we check if the button clicked has an active class. This would mean the user is already viewing the desired layout and we don’t need to perform anything. Otherwise we need to check the button ID and switchup the layout accordingly.

Inside the else clause I’m performing two more logic checks. First we see if the user has clicked gridviewand update the current list objects to display in a grid-style. Otherwise we switch back from the grids into a list format.

The lines of code go through a few different functions. First we update the currently active button and change the images to highlight our new display. Then we remove the previous grid/list class and apply our updated selection, along with changing all of the thumbnail images.

It does seem confusing without context but all the code is fairly straightforward. Much of the DOM manipulation has to do with replacing classes and image src attributes. But if you wanted to get fancy it’s a simple process to further animate fade in/out effects on the layout change. Yet for a basic switcher like this you don’t always need animations.

Live Demo – Download Source Code

This tutorial should give you a strong introduction to manipulating your page layouts with jQuery. Even the simple action of mixing up classes & IDs can boldly enhance the user experience. And developing over the jQuery library makes coding JavaScript easier than ever before! Be sure to let us know your thoughts on the tutorial in our post discussion area below.