Multiple Pages As Show/Hide DIV On A Single Web Page Using Pure JavaScript

Do you want to show multiple pages using javascript on a single HTML page then you can do this by using show/hide DIV concept? Many time you need to split your content into multiple pages in one HTML based on your category and want the user to open there desired pages by keeping on the same HTML page then you can do this by adding multiple pages in one HTML page using pure vanilla javascript.

There are many code snippets available online or on many other blogs and website but everyone is not able to optimize your blog or website so you need some optimized code snippet. So now checkout out code snippet for your blog and website that will give you all features for your desired code. Now grab the ready to use code and paste it where you want.

Features:

1. It Will Work On All Major Browsers.
2. Pure Vanilla JavaScript Code.
3. No External JQuery Or Script.
4. Small Snippet Code With Easy Understanding.
5. Toggle Function, One Page Show Other Hide.

How To Show Multiple Pages As Show/Hide DIV On A Single Web Page Using Pure JavaScript?

There are few easy and understandable steps to achieve your desired functionality using pure Vanilla JavaScript that we are gonna share below. Follow each step perfectly.

HTML:

<span onclick="show('Page1');">1</span>
<span onclick="show('Page2');">2</span>
<span onclick="show('Page3');">3</span>

<div id="Page1" class="page" style="display:block">
    Content of Page 1
</div>
<div id="Page2" class="page" style="display:none">
    Content of Page 2
</div>
<div id="Page3" class="page" style="display:none">
    Content of Page 3
</div>

JavaScript:

function show(elementID) {
    var ele = document.getElementById(elementID);
    if (!ele) {
        alert("No Such Page Found.");
        return;
    }
    var pages = document.getElementsByClassName('page');
    for(var i = 0; i < pages.length; i++) {
        pages[i].style.display = 'none';
    }
    ele.style.display = 'block';
}

Final Words:

Be aware that the is placed well in your document. Rest all is in your hand if you want to customize it or play with it. That’s all we have. If you have any problem with this code in your template then feel free to contact us with a full explanation of your problem. We will reply to you as time allowed to us. Don’t forget to share this with your friends so they can also take benefit from it and leave.