Click here to Skip to main content
13,150,178 members (55,503 online)
Click here to Skip to main content
Add your own
alternative version


5 bookmarked
Posted 4 Apr 2013

Managing Multiple Views in Single Page HTML Apps

, 4 Apr 2013
Rate this:
Please Sign up or sign in to vote.
This article demonstrates how to manage multiple views in a single HTML page using jQuery.


Many of you might have worked with Single Page HTML Apps which require many sections (I'll call it as View hereafter) to be hidden and shown appropriately. Though it is not the toughest task, it requires a lot of code to manage those views.

This tip demonstrates how you can easily make such apps with HTML and jQuery.

HTML Markup

Let us begin with simple HTML markup which contains a lot of views. Each <div> which you want to be a separate page or view is added as a CSS class called 'view'.

<!DOCTYPE html>
    <script src="jquery-1.9.1.min.js"></script>
            display: none;
    <div id="lotOfPages">

    <div class="view" id="page1">
            <h1>Page 1</h1>
    <div class="view hide" id="page2">
            <h1>Page 2</h1>

    <div class="view hide" id="page3">
            <h1>Page 3</h1>


    <button id="showPage1Btn" data-launch-view="page1">Page 1</button>
    <button id="showPage2Btn" data-launch-view="page2">Page 2</button>
    <button id="showPage3Btn" data-launch-view="page3">Page 3</button>


This markup has three 'div's which we call as view. Each <div> is added the 'view' class. Then, we have three buttons to launch each page when clicked. [You can replace button with any HTML element as per your requirements]. These buttons are added a HTML5 data attribute called 'data-launch-view' with the value of ID of the page we wish to display.

Initially, <div> with ID page1 is displayed and other pages are hidden.


Now let us add a script to this page which is required to show and hide appropriate views.

$(document).ready(function (e) {

        function showView(viewName) {
    $('#' + viewName).show();

        $('[data-launch-view]').click(function (e) {
            var viewName = $(this).attr('data-launch-view');


showView() function displays the required view by hiding all other views.

The next function makes elements with 'data-launch-view' attribute to load the appropriate view. The value of 'data-launch-view' attribute must be ID of the page (<div>) to be shown.

Now when buttons are clicked, the given view is shown by hiding other views. You can add as many views as needed without writing an additional script.


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


About the Author

Nirvin M
India India
This member doesn't quite have enough reputation to be able to display their biography and homepage.

You may also be interested in...


Comments and Discussions

QuestionEffective Pin
veen_rp29-Oct-16 20:13
professionalveen_rp29-Oct-16 20:13 
GeneralVery helpful. Simple and clear. Thanks! Pin
lukeadickinson10-Apr-15 9:56
memberlukeadickinson10-Apr-15 9:56 

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.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.170924.2 | Last Updated 5 Apr 2013
Article Copyright 2013 by Nirvin M
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid