Expand Collapse Sidebar Navigation using JavaScript dynamically

Updated on 23 Mar 2012,
Published on 21 Jul 2010

The JavaScript DOM object and style properties enable you to create the functionality to dynamically expand or collapse the sidebar navigation control. The JavaScript DOM object provides the document object and allows to access the getElementById method that accepts the Id of the HTML element that you want to customize dynamically. Additionally, the getElementById method provides the further access to the style properties that enable you to customize the various types of CSS based properties of the associated HTML element.

Syntax

document.getElementById('id of HTML element').style.[css type property name]

The above syntax can be used to customize the CSS properties of the HTML element by assigning the value to the "css type property name" supported by JavaScript.

JavaScript DOM Examples:

You can see the live samples and examples of JavaScript DOM from the following links:

One of our visitor "Neil" asked:

"I was wondering what to do if I want to use multiple div's to resize after click. Like let me explain you. I have a content on one side and sidebar on another.

I was to have the sidebar hidden on start and just a button showing on header. And the content to fill screen, only when the user clicks on the function I want the content to be resized in accordance with the sidebar on the screen.

Like say my width of page is 800px and sidebar with is 200 px.

Now when the page loads 800px = content. and sidebar = 0px.

I was looking into content=600px and sidebar =200px after i click the button to show sidebar on screen."

This tutorial is an answer to help "Neil" and other developers who want to create the similar functionality of expand/collapse using JavaScript:

CSS Code

<style type="text/css">
    body {margin:0px; padding: 0px; font-family: Georgia; font-size: 12px; color: #555555}
    h3 {margin: 5px; padding: 5px; color: #444444;}
    .left { float: left; }
    .right { float: right; }
    .clear {clear:both;}
    .container { width: 818px; margin: 0px auto;}
    .sidebar { float: left; border: solid 5px #ababab; width:200px; background-color: #f9f9f9;}
    .content { float: right; border: solid 4px #cccccc; width:600px;}
    .content p {margin: 5px; padding: 5px;}
    .input {width: 800px; margin:0px auto; text-align: center; padding: 10px 0px 0px 0px;}
</style>

JavaScript Code

<script type="text/javascript" language="javascript">
    var IsSidebarOpen = false;

    function OnInit() {
        document.getElementById('sidebarDiv').style.display = 'none';
        document.getElementById('contentDiv').style.width = '800px';
        IsSidebarOpen = false;
    }

    function btnShowSidebar_OnClick(sender) {
        if (!IsSidebarOpen) {
            document.getElementById('sidebarDiv').style.display = 'block';
            document.getElementById('contentDiv').style.width = '600px';
            sender.value = 'hide sidebar';
            IsSidebarOpen = true;
        }
        else {
            OnInit();
            sender.value = 'show sidebar';
        }
    }

    window.onload = OnInit;
</script>

Add the above CSS and JavaScript code inside the head section of the HTML page.

HTML Code

<div class="container">
    <div id="sidebarDiv" class="sidebar">
        <h3>Sidebar</h3>
        <ul>
            <li>Sidebar Item 1</li>
            <li>Sidebar Item 2</li>
            <li>Sidebar Item 3</li>
            <li>Sidebar Item 4</li>
            <li>Sidebar Item 5</li>
        </ul>
        <ul>
            <li>Sidebar Item 1</li>
            <li>Sidebar Item 2</li>
            <li>Sidebar Item 3</li>
            <li>Sidebar Item 4</li>
            <li>Sidebar Item 5</li>
        </ul>
        <ul>
            <li>Sidebar Item 1</li>
            <li>Sidebar Item 2</li>
            <li>Sidebar Item 3</li>
            <li>Sidebar Item 4</li>
            <li>Sidebar Item 5</li>
        </ul>
    </div>
    <div id="contentDiv" class="content">
        <h3>Content</h3>
        <p>The demo text content. The demo text content. The demo text content. The demo text content. The demo text content.</p>
        <p>The demo text content. The demo text content. The demo text content. The demo text content. The demo text content.</p>
        <p>The demo text content. The demo text content. The demo text content. The demo text content. The demo text content.</p>
        <p>The demo text content. The demo text content. The demo text content. The demo text content. The demo text content.</p>
        <p>The demo text content. The demo text content. The demo text content. The demo text content. The demo text content.</p>
        <p>The demo text content. The demo text content. The demo text content. The demo text content. The demo text content.</p>
    </div>
    <div class="clear"></div>
    <div class="input">
    <input id="btnShowSidebar" type="button" value="show sidebar" onclick="btnShowSidebar_OnClick(this)" />
    </div>
</div>

Output:

You can see the output of above discussed codes from the following link:

Expand Collapse Sidebar Navigation Dynamically

In the JavaScript code for above sample we have used the display property to set the CSS style of sidebar to "none". You can learn about the different between visibility property and display property from the tutorials Javascript Show Hide Div Using Visibility and Javascript Div Collapse Style Using Display None. You can use any one of the CSS type property according to your requirement.

Previous Tutorial