Show or hide SharePoint Web Parts and Quicklaunch using JavaScript

Sometimes you have content on your SharePoint application page (i.e. Web Part Page), that you only want to show when the users request it. Otherwise it is hidden.

This post gives you an example on how to show or hide SharePoint Web Parts and Quicklaunch using JavaScript.

This can easily be achieved by using JavaScript.

Code Sample

The following code sample hides the Web Parts with the ID “MSOZoneCell_WebPartWPQ4” and “MSOZoneCell_WebPartWPQ6” as well as the quicklaunch navigation on the left.

For your environment, you will have to replace the ids with yours. This can be done e.g. with the IE developer tools (F12).

Implementation

Simply copy the code to a text editor (e.g. notepad) and save it to a SharePoint library (e.g. site assets).

(Adjust the content ids you want to show or hide, i.e. replace “MSOZoneCell_WebPartWPQ4” and “MSOZoneCell_WebPartWPQ6” with your values.)

Add a CEWP (Content Editor Web Part) to the Web Part page where you want to show / hide the content and link the content to that text file.

That’s it. The “Show” button will be displayed when the page loads and when clicked, the Web Parts and the Quicklaunch are shown.

Then the “Show” Button will be hidden an the “Hide” Button is displayed (which hides the contents, of course).

Update (in response to tony.zhang):

If you want to implement an image instead of the button, add the following CSS to your page and adjust it accordingly: