In this post I'll go over how you can utilize JQuery and CSS classes
to show/hide various parts across the different sections
of a page without creating a mess!
The Challenge
You've got a wizard-like page with multiple steps and you want to be
able to show/hide various elements based upon the
current step. Below
is a dumbed-down example:
The colored boxes represent the parts that are being shared across
the various sections of the page. For instance, the green
box is being
shared by the ‘Image Selection' and ‘Order Confirmation' sections.
While the red box is being shared by all three
sections.
So the challenge is: How do we show/hide these various parts across
the sections of the page without making a mess? And by
mess, I refer to
duplicate code and/or little <% if..then %> snippets scattered
throughout the page.
The Solution
By using some CSS/JQuery trickery, of course! What we'll do is
introduce some CSS classes that we will then apply to the
various parts
for which we need to handle visibility. Here are the classes that we
will need:
- section – Represents a section
- requestor – Represents the requestor section
- image-selection – Represents the image selection section
- confirmation – Represents the order confirmation section
The CSS classes will then be applied to the various parts based upon the section inside which the part is to be shown:
<div>
<input type='hidden' id='section-to-show' />
<table>
<tr>
<td>Request Type:</td>
<td class='section requestor'>
<select>...</select>
</td>
<td class='section image-selection confirmation'>
<%= selectedRequestType %>
</td>
</tr>
...
<tr>
<td>First Name:</td>
<td><%= firstName %></td>
</tr>
<tr>
<td>Last Name:</td>
<td><%= lastName %></td>
</tr>
<tr class='section requestor confirmation'>
<td>Email</td>
<td><%= email %></td>
</tr>
...
...
<tr class='section image-selection confirmation'>
<td>Image</td>
<td class='section image-selection'>
Browse...
</td>
<td class='section confirmation'>
<img src='..' />
</td>
</tr>
...
</table>
</div>
A few things to highlight:
– The hidden input field ‘section-to-show' indicates the section to display. It's value is set by the server-side code.
– There are two table columns inside the first table row. Only one
will be visible based up the section that is being displayed.
– The first name and last name table rows don't have any classes applied to them. This is because they are always visible.
– The last table row shown above gives an example of how you can make
the visibility conditional for both the table row and the table column.
– I skipped various rows in the HTML form above to save some typing and to avoid being repetitive.
And now for the JQuery:
$(document).ready(function(){
$('.section').hide();
current_section = $('#section-to-show').val();
if (current_section == 'requestor')
$('.requestor').show();
else if (current_section == 'image-selection')
$('.image-selection').show();
});
And there you have it – a cleaner alternative to showing and hiding various parts across the sections of a page!