Use JavaScript to Hide SharePoint's Quick Launch Bar

SharePoint provides a default "Quick Launch Bar" (see Figure 1) that allows users to navigate to various common SharePoint items quickly.

Figure 1. Quick Launch Bar: This navigation feature appears on the left-hand side of SharePoint pages by default.

The Quick Launch Bar works well, and while you would normally leave it alone, there may be times when you want to hide it. You can do that without using any server-side code by including a little JavaScript to change the menu's CSS style.

This example uses the Content Editor Web Part (CEWP). Figure 2 shows a blank page with a CEWP on it. To get started, create a new page using the "Blank Web Part Page" layout, and add a CEWP to the new page.

Figure 2. Template Page: Here's a new Web Part page containing a Content Editor Web Part.

Basically, this technique involves adding the JavaScript and some basic HTML markup to the CEWP, after which it will do all the work of hiding the Quick Launch Bar. Here's the procedure:

1. On the CEWP, click the "Edit" dropdown, and then select "Modify Shared Web Part," as shown in Figure 3.



Figure 3. Editing the CEWP: Clicking the Edit dropdown on the CEWP bar in the page provides an option to "Modify Shared Web Part."


2. Next, click on the Source Editor in the right-hand pane.
3. Copy the following JavaScript and paste it into the Source Code Editor:

<script  type="text/javascript" >
function applyStyle(flag)
{
   if (!flag)
   {
      document.getElementById(
         "LeftNavigationAreaCell").style.
         display="none";
   }
   else
   {
      document.getElementById(
         "LeftNavigationAreaCell").style.display="block";
   }
}
</script>

4. Copy and paste the following HTML into the edit window. The markup creates two buttons to hide and show the Quick Launch Bar:

<input id="Button1" type="button" value="Hide Quick Launch Nav Bar" onclick="applyStyle(false)"  />
<input id="Button2" type="button" value="Show Quick Launch Nav Bar" onclick="applyStyle(true)"  />

5. After copying and pasting all the code, click Save.
6. On the right-hand pane, click OK to save your changes.
7. Finally, publish the page.

Figure 4. Hide/Show Buttons: The HTML added to the CEWP displays these two buttons, which call the included JavaScript applyStyle() function to hide or show the Quick Launch Bar.

Now, when you browse to the page, you should see the two buttons as shown in Figure 4. Pressing the buttons will hide or show the Quick Launch Bar.

Here's a closer examination of the JavaScript that does the work. Essentially, the code simply changes the display mode of the Quick Launch Bar container, which it acquires using its ID—LeftNavigationAreaCell.

Depending on which button gets clicked, the code changes the display mode using the display property of the container's style object:

document.getElementById("LeftNavigationAreaCell").style.display 

The two HTML buttons work locally, without a postback. This technique is particularly useful for cases where postback is not allowed or possible, such as when you want to have a custom in-page preview option and need to hide certain areas based on some client-side business logic.

Before concluding, it's worth having a short discussion of some challenges that accompany this technique. First, because it manipulates styles directly in the page using JavaScript and HTML inside a CEWP, you will need to add a CEWP on each page where you need to use the technique. That's easy when you need to use the technique on only a few pages, but quickly becomes a bottleneck if the number of pages on which you use the technique grows substantially. Second, unless you're familiar with more advanced programming techniques, you'll have to modify each CEWP manually. Finally, you'll have to keep track of which pages use the technique, so you can update them if necessary.

Using client-side scripting is beneficial primarily when using server side code is not possible or desirable, and you need to modify only a few pages. Plan to take some time to analyze your particular scenario before adopting this approach.

On the other hand, one good thing about this technique is that it's easy to remove: You can easily take the scripts and markup out in one step by removing the CWEP from the pages. The charm of this approach is that it’s simple, yet provides an instant fix without making any server-side code changes.