Click here to Skip to main content
15,867,686 members
Articles / Web Development / CSS

Show/Hide Various Sections of a Page using JQuery and CSS

Rate me:
Please Sign up or sign in to vote.
0.00/5 (No votes)
6 May 2012CPOL2 min read 16.3K   6   3
How to utilize JQuery and CSS classes to show/hide various parts across the different sections of a page without creating a mess

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:

HTML
<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. Its value is set by the server-side code.
  • There are two table columns inside the first table row. Only one will be visible based upon 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:

JavaScript
$(document).ready(function(){
// hide all sections to begin with 
$('.section').hide();
current_section = $('#section-to-show').val();
$("." + current_section).show();
});

And there you have it – a cleaner alternative to showing and hiding various parts across the sections of a page!

This article was originally posted at http://nizarnoorani.com?p=579

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer (Senior) NCube, Inc.
United States United States
Nizar Noorani is an independent software consultant. He provides services in the areas of web applications and systems architecture, analysis, design and development. Although proficient in a variety of technologies, he specializes in the .NET technology. He can be reached at nizar.noorani@gmail.com.

Comments and Discussions

 
SuggestionSuggestion Pin
ShaolinVn10-May-12 6:59
ShaolinVn10-May-12 6:59 
GeneralRe: Suggestion Pin
Nizar Noorani10-May-12 7:18
Nizar Noorani10-May-12 7:18 
QuestionFormatting Pin
Mehdi Gholam6-May-12 4:36
Mehdi Gholam6-May-12 4:36 
Please fix the formatting.
Its the man, not the machine - Chuck Yeager
If at first you don't succeed... get a better publicist
If the final destination is death, then we should enjoy every second of the journey.

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.