Show/Hide Multiple Web Parts

You have 4 web parts on the page but when the page loads you only see the first web part, ‘Overdue Tasks’. A dynamically created menu of all the task web parts is on the left.

When you click on ‘My Tasks’, ‘Overdue Tasks’ is hidden and ‘My Tasks’ appears in its place

Clicking on ‘All Tasks’ shows the All Tasks Web part

When you edit the page, you can see all 4 web parts and easily modify or reorder them.

Technical Expertise and Permissions needed:

• Create views for a list
• Add and Modify web parts on a page
• Copy/paste some code into a content editor web part

Here I was again, trying to figure out how to show multiple views of the same list on my page. I had a task list and I wanted to show tasks for the current person (My Tasks), Overdue Tasks, High Priority Tasks and a Final view of all the tasks on the same page.

Problem is, there is a limited amount of real estate on the page to show all these views at once. I have in the past made multiple pages and placed one web part on each and made a menu that allowed me to go back and forth, the only problem is now I have to wait for a page load each time.

Fix:
I need some javascript or jquery to d hide all the webparts and only show me the one web part I want to see. My solution also has to do the following:

• Be easy used by non-technical users
• Work no matter how many web parts are included
• Not hide the web parts in ‘edit page’ mode

Here is what I came up with:

I created views for Overdue Tasks, and High Priority in my task list. (All Tasks and My Tasks are created by default)

I created 4 web parts of the task list in one column on my page. I set there width to 600 px each gave each one a title with the word “Task” in it (my keyword). I set there chrome type to title only and I changed their view to one of the four views I wanted to show.

Next I added a content editor web part and added the following code:

<script type=text/javascript>
////////////////////////////////////////// User Chosen Parameters ///////////////////////////////////////////////
var displayFirst=false			// Show the first web part on load
var menuTitle="" 				//Title of the top menu. If empty, spacing will be removed
var keyWord="Department"		//The keyword in the title of all web parts used in this code.  ie any web part with the word 'Tasks' will be hidden and added to the menu
var menuType="DropDown" 		//Enter 'List' or 'DropDown'
//--------------------------------------------------------------------------------------------------------------------------------------------------
</script>

<div class=content id=jLoadDiv></div>

<script type=text/javascript>
if(typeof jQuery=="undefined"){
	var jQPath="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/";
	document.write("<script src='",jQPath,"jquery.js' type='text/javascript'><\/script>");
}
</script>

<script type=text/javascript>
$("document").ready(function(){
  if(menuTitle!="")
  {$("#jLoadDiv").append("<p class='ms-WPHeader'><H3 class='ms-standardheader ms-WPTitle'>"+menuTitle+"</h3></p>")}
  hideZones(1,displayFirst);
});

function show(item)
{
 hideZones(0,false); //hide all web parts
 var webPart
 if(menuType=="List"){webPart=item.id}
 else if(menuType=="DropDown"&&item!="none"){webPart=item}
 else if(menuType=="DropDown"&&item=="none"){return false;}
 document.getElementById(webPart).style.display=""; //Show selected web part
}

function hideZones(writeMenu,displayFirst)
{
    var menu=""
	var menuDD=""
	if (displayFirst==false)
		{menuDD="<option value='none'>--- Select an Item ---</option>"}
    var listTitle = $("td:contains('"+keyWord+"')");//make an array of the titles of the web parts

    $.each(listTitle, function(i,e)
	{
		var listZone=listTitle[i];
		var wpnum
		if (listTitle[i].title.length!=0){
		//slice off the table title and select the web part number
		wpnum="MSOZoneCell_WebPartWPQ"+listZone.id.substring(15);
        //If not in edit mode, hide the web parts
		if (displayFirst==false)
		{
		  document.getElementById(wpnum).style.display="none";
		}
		else
		{
		  displayFirst=false;
		}
		var Title=listZone.title.split(" - ")// get rid of the description by splitting on the " - " and only showing the first part
		menu=menu+"<li><a href='javascript:show("+wpnum+");'>"+Title[0]+"</a></li>"
		menuDD=menuDD+"<option value="+wpnum+">"+Title[0]+"</a></option>"
		}
	});
    if (writeMenu==1&&menuType=="List")
		{$("#jLoadDiv").append("<ul>"+menu+"</ul>")}
	else if (writeMenu==1&&menuType=="DropDown")
		{$("#jLoadDiv").append("<select onchange='javascript:show(this.value)' id='webShowHide'>"+menuDD+"</select>")}
} //end function
</script>

The code has three options:

var keyWord=”Tasks” – Put the keyword thats in all your web part titles here

var displayFirst=true – Leave this true if you want the first web part to show up on load

var menuTitle=”Whatever you want the title of your menu to be”

Viola!
Now the code will go out and add any web part that has your keyword in the title to a menu and then hide it. When you click on the menu item all the web parts will be hidden except for that web part (view).

UPDATE:
1 Fix has been added.
The webpart description has been filtered out so it won’t show up in the menu

There is a new menu type at the type, since several people asked for a drop down instead of a list for the menu.

At the top of the code, change:
var menuType=”List” – to show the menu as a list
var menuType=”DropDown” – to show a drop down list with all your selected web parts

---

Possibly related posts: (automatically generated)