Expand Collapse Sidebar Navigation Dynamically

JavaScript Expand Collapse Style functionality for the sidebar navigation can be created by using JavaScript DOM style properties. In this sample Display property of style object of JavaScript DOM has been used to expand or collapse the DIV element dynamically.

JavaScript DOM Features Used

1. document object

2. getElementById method

3. style object

4. display property

Display property value "none" releases the white space occupied by the Div element.

The sample includes the CSS code to provide the interactive look and physical design to the output. In the header section of the HTML page JavaScript code has been added to perform the requried functionality. An input type HTML form button has been used to raise the click event that calls the JavaScript function that expands/collapses the sidebar navgation control created using HTML Div element. Try the sample below to learn and practice the JavaScript DOM code for developing this functionality:

Edit this code and click update to view output

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Javascript Expand Collapse Sidebar Navigation</title>
    <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: 418px; margin: 0px auto;}
        .sidebar { float: left; border: solid 5px #ababab; width:100px; background-color: #f9f9f9;}
        .content { float: right; border: solid 4px #cccccc; width:300px;}
        .content p {margin: 5px; padding: 5px;}
        .input {width: 400px; margin:0px auto; text-align: center; padding: 10px 0px 0px 0px;}
    </style>

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

window.onload = OnInit;
    </script>
</head>
<body>
    <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>
        </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.</p>
        </div>
        <div class="clear"></div>
        <div class="input">
        <input id="btnShowSidebar" type="button" value="show sidebar" onclick="btnShowSidebar_OnClick(this)" />
        </div>
    </div>
    
</body>
</html>

OUTPUT:

Get Code for this sample...

Previous Sample