Home > SharePoint Advancements > Hiding and Unhiding (Side Navigation, Top Navigation, Top Panel) using Jquery

Hiding and Unhiding (Side Navigation, Top Navigation, Top Panel) using Jquery

If you would like to hide/unhide the left navigation, top navigation or top panel in SharePoint 2007 you can do this quite simply by using a little bit of Jquery technique.
 
On your SharePoint site add a Content Editor WebPart to your page.
 
1.  Site Actions -> Edit Page
2.  Click “Add a Web Part”
3.  Select “Content Web Editor” webpart.
4.  Add webpart to your page.
 
Next modify the Content Editor Shared Webpart
 
1.  Click on Edit
2.  Select Modify Shared Webpart
3.  Click on “Source Editor…” button
 
Copy and paste the Jquery code below into Source Editor and save.
 
<div> 
<input value=”#onetIdTopNavBarContainer” /> 
<span style=”vertical-align:top”>Top Navigation</span> 
</div> 
<div> 
<input value=”#LeftNavigationAreaCell” /> 
<span style=”vertical-align:top”>Left Nav Pane</span> 
</div> 
<div> 
<input value=”tr:lt(9)” /> 
<span style=”vertical-align:top”>Top Panel</span> 
</div> 
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js“></script> 
<script> 
$(function() { 
$(“input.toggleClass:checkbox”).click(function(e) { 
$($(e.target).val()).toggle(); 
}); 
}); 
</script>
 
This JQuery code will hide/unhide the Top Navigation, Left Nav Panel, and Top Panel on your page based on checkbox toggling.  This of course can be changed to whichever you like.
 
If you click on the checkbox it will call the toggle function and hide the div on your page.  Once you uncheck the box the div will reappear.
 
Enjoy.

Advertisements
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: