Quantcast
Channel: JShidell's SharePoint Blog » SharePoint Navigation
Viewing all articles
Browse latest Browse all 2

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

$
0
0

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.



Viewing all articles
Browse latest Browse all 2

Latest Images

Trending Articles





Latest Images