Weekly Newsletter Signup

Jul

16

Dynamically Show/Hide Multiple Web Parts

Original Publication Date: Thursday, July 16, 2009

Filed Under: Bryon Wyly, Javascript, Libraries and Lists, Web Parts, jquery

SharePoint User Level: Power User

July 21, 2009 Update: We have updated the script based upon user feedback. Please let us know how it goes.

Bryon Wyly writes Codeless Solutions for SharePoint. In this article he’s written a really fun script, demonstrating how to show or hide multiple lists and web parts. It’s like a magic trick – now you see it, now you don’t. And the solution is very easy. Thanks Bryon!

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 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 easily 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 their 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:

 
<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>
 
var displayFirst=true 			// Show the first web part on load
var menuTitle="Web Services Tasks" 	//Title of the menu for the links
var keyWord="Tasks"
//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*/
 
$("document").ready(function(){
  {$("#jLoadDiv").append("<p class='ms-WPHeader'><H3 class='ms-standardheader ms-WPTitle'>"+menuTitle+"</h3></p>")}
  hideZones(1,true);
});
 
function show(item)
{
 hideZones(0,false); //hide all web parts
 document.getElementById(item.id).style.display=""; //Show selected web part
}
 
function hideZones(writeMenu,displayFirst)
{
	var menu=""
    var editString = "Add"
    editString = editString + ' a Web Part'
    var isEditMode = $("td:contains(editString):not('editString')");// checks to see if in edit mode
    var listTitle = $("td:contains('"+keyWord+"')");//make an array of the titles of the web parts
    isEditMode.length=0
 
    $.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 (isEditMode.length==0 && displayFirst==false)
		{
		  document.getElementById(wpnum).style.display="none";
		}
		else
		{
		  displayFirst=false;
		}
		menu=menu+"<li><a href='javascript:show("+wpnum+");'>"+listZone.title+"</a></li>"
		}
	});
    if (writeMenu==1){$("#jLoadDiv").append("<ul>"+menu+"</ul>")}
} //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).

Guest Author: Bryon Wyly

Bryon has been a Microsoft Developer for 6 years and is currently the SharePoint developer and administrator for the Xavier University. He is responsible for SharePoint collaboration sites, CIO dashboards and the campus wide intranet.

Bryon enjoys finding solutions with SharePoint that an end user can implement out of the box or with SharePoint Designer.

Spread the word...

Comments

31 Responses to “Dynamically Show/Hide Multiple Web Parts”

David Milliken on July 16th, 2009 3:12 pm

Will this work on a Data View Web Part that was created in SPD?
EndUserSharePoint on July 16th, 2009 8:07 pm

David – Just curious… how else are you going to create a DVWP? — Mark
JB-Mids on July 18th, 2009 3:26 am

Wow, this is absolutely brillient… I’ve had the requirment for this on more than one occasion and could only think to mess about with i frames and page viewer parts etc and in the end I may as well not have been using sharepoint at all lol..

This is such a simple, and yet powerful solution… Thanks for sharing!
Nancy on July 18th, 2009 8:31 am

This looks great. I can see immediate use for such a solution across the board.

One question- do the target web parts HAVE to default to “show title” for this to work?
Karthik on July 20th, 2009 10:22 am

This is really a innovative task!!!

I tried to use your code to accomplish this task on couple of Excel Web Parts, but not luck. It just showed me the menuTitle and did not created dynamic menus. Also Excel web parts are not hidden even having the keyword in their title.

Will it work only for list web parts? I could not understand how to debug it?
sireesh on July 21st, 2009 4:15 am

Hi Bryon

Its great to see the code that exactly matches my requirement, however when i tried to replicate, it hides all the webparts and displayed the only first one, but in content editor webpart it just displayed the menu title and not the dynamic menu..

I tried to dig the solution but no use…

can you please tell me what might got wrong from my side.

Thanks in Advance
sireesh on July 21st, 2009 5:00 am

Hi Bryon

I found the reason why the menu is not displaying.

Hi Karthik

I hope this will help you

replace the code
menumenu=menu+”<a href=’javascript:show(”+wpnum+”);’”+listZone.title+”“;

with

menu=menu+”“+listZone.title+”“;

the colse tag for the is missed in the above code.

Replace this
editStringeditString = editString + ‘ a Web Part’

with

editString = editString + ‘ a Web Part’

Hope this will help…

Thanks
Sireesh
sireesh on July 21st, 2009 5:04 am

menu= menu + ” ” + listZone.title + ” “;

put > in between ‘(single quot) and “(double quot) that comes after this (”+wpnum+”);
Kermmit on July 21st, 2009 7:27 am

I love the idea but can not get the code to work. Could someone send me or post the full working code. Thanks
Karthik on July 21st, 2009 9:28 am

Sireesh,

I appreciate your reply. I did what you mentioned in your comments … But no luck … is this working for you with those changes?

Now my menu title also not showing up… I am checking whether I missed something.

Please let me know if you feel that I missed something.
Bryon on July 21st, 2009 2:05 pm

I believe that the code may gained a special character when pasted from it’s original source.

Try pasting from the original blog post http://wyly.wordpress.com/2009/05/22/showhide-multiple-web-parts/ … Make sure that the Title and the keyword as the same including capitalization. I will look through both sets of code and see why the code on my post works and the copied code on endusersharepoint.com does not.

Bryon Wyly

PS I used the default master template and this code has been tested and confirmed on lists and document libraries.
EndUserSharePoint on July 21st, 2009 2:39 pm

I have updated the script. Please confirm it is now working. Thanks. — Mark
Bryon on July 21st, 2009 3:20 pm

Ok, I copied the code above and it now works, thanks Mark!

Remember that the keyword has to exist in the title of all the web parts you want to show up in the menu.

You change the title of the menu with the vaiable menuTitle

Bryon
Karthik on July 21st, 2009 3:52 pm

Bryon, Its working now, Thanks.

Actually I tested this script on Dundas chart web parts for SharePoint. But its not working as that of other out of the box SharePoint web parts.

I included a keyword in 3 of the dundas charts, the menu list is not showing up. If I give the full web part name as keyword then it is showing only that menu item in menu list.

I think I need to make some workarounds to make this work.

Do you have any thoughts on this?
Karthik on July 21st, 2009 4:12 pm

Whenever I am placing a keyword in script for dundas charts, its showing me an error on the page in status bar of IE.

How to debug the code to exactly know what the error on the page is?
Kermit on July 22nd, 2009 6:06 am

Thanks so much. It works!
Nancy on July 23rd, 2009 1:19 pm

I have deployed this with “var displayFirst=false” to hide all the associated web parts on page load. However, I cannot get the first web part to stop displaying.

It is my understanding, from your explanation, that if “false” is present in this line, none of the web parts shold be seen until a user clicks a link.

Am I missing something?
Bryon on July 27th, 2009 9:22 am

Nancy,

Found it!

hideZones(1,true);
needs to be changed to
hideZones(1,displayFirst);

It will then work correctly, I’ve submitted some revised code to fix this and a Firefox only issue I have encountered.

Thanks for all your feed back!

–Bryon
JB-Mids on August 2nd, 2009 5:59 am

Hia,

Copied the code from the link above and it worked great 1st time… However only when in draft page mode, as soon as I publish a page it displays all webparts again.

Any ideas? I wanted this primarily for our main intranet pages which are all publishing sites.

Thanks
Bryon Wyly on August 3rd, 2009 2:53 pm

JB,

I tried out the javascript code in a publishing template and it worked as a draft and and after being published. The only reason I could think of why it was not working is that perhaps the code in the content editor web part was not published with web parts.

Could you look for the code in the view source. If the code is there, it could other javascript code on the page or something in your master template.

Email your view source code of the draft mode and the published version if you would like my help. I would be very curious to resolve this issue.

Bryon
Bill Corrigan on August 4th, 2009 12:37 pm

Great code, thank you very much for it.

One problem I am having is I get a security warning about content not being delivered using a secure HTTPS connection. Is this due to this line:
var jQPath=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/”;

-Bill
AutoSponge on August 5th, 2009 7:50 am

@Bill,

Point your browser to http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js and download the code. Then upload it to a document library on your SSL server where everyone has (at least) read access.

Now, alter the jQPath variable with the new directory (e.g., if you added the file to the /js library, your new path is “/js/”.
James Shidell on August 7th, 2009 9:47 am

Bryon -

This is great. However, I was wondering if this can be down with just web parts and no lists?

Is there a way to create the menu dynamically with just using webparts?

Thanks,

JShidell
Bryon Wyly on August 7th, 2009 1:07 pm

This should work with any web part James as long as you put the keyword in the title of each web part you want to show/hide and appear in the menu.

I HAVE only tested it on task lists and document libraries though. The code hides all the web parts with the specified keyword in the title then populates the menu with the title of any web part it hides. Hope this helps, let me know what other types of web parts you try!

Bryon
James Shidell on August 7th, 2009 1:24 pm

Bryon -

Thank you. I got it to work just on web parts. I’ve only tried them on CEWP and Image Web parts. But I’m pretty sure they will work for others as well.

Only thing I need to figure out now is a unique title identifier because not all Web Parts are related to each other but I would like to use your Hide/Unhide code on all Web Parts regardless if they relate to each other or not.

Also do you know of any way to dynamically change just one CEWP based off of another?

For example if I had one CEWP that displayed a map of Africa, and I had another CEWP that lists the countries in Africa I would like to just click on the country name in the second CEWP and it would change the map in the first CEWP to the map of that specific country?

I only ask because what I’m trying to accomplish something like this, and I would like to just have one CEWP that would change instead of having 15 different CEWPs and hiding and unhiding them. The site would become very cluttered.

Thanks again for your help, and again thanks for sharing.

v/r
JShidell
Bill Corrigan on August 7th, 2009 1:26 pm

I have successfully used it on lists with views and Excel Web Access.

Also I solved my https problem by adding the s to the http before the link to the library at Google.

-Bill
JB-Mids on August 7th, 2009 2:49 pm

ps: works on all webparts, regardless of whether it’s a list, doc library… a wss3 webpart or 2007 webpart or a webpart created in sharepoint designer.

RE: The Publishing Page issue:

This seems to have resolved itself and the javascript now works well on all publishing pages on Moss 2007, the previous issue I had may have been because I was playing with it over citrix at the time via the web rather than our internal network.

Improvement: I have gone further and hidden the ‘Web Part Tasks links’ webpart that is created automatically and simply copied the hyperlinks to a really neat css hover menu.

One last Question Though!

The script is reliant on the ‘TITLE’ of the webpart being shown on the web part view. This is not desirable in my particular application so is there a way of hiding the title by maybe making it ‘white text’ ie: show it but have it appear as invisable by assigning the color white?

I guess this could be a style sheet thing that I’d have to consider against the entire site collection so before I go that route, is there a way of doing that via the code directly?
James Shidell on August 8th, 2009 8:12 am

Is there any way this can be done on more than just one web part?

If I have say 4 web parts that contain information that relate to each other is there a way to hide/unhide them all based off the title?

I’m guessing no because the way this script works is it hides all web parts with the same title expect the first one. If all 4 web parts have the same title it will hide 3 out of the 4 web parts. I would like to show all 4.

Can this be done?

v/r
JShidell
Karthik Nallajalla on August 8th, 2009 2:02 pm

James,

I think this script don’t exactly works for your requirement, but you can create your own script by referring this as an example for your requirement.

or else you can manually show/hide web parts using some if … else conditions in javascript in content editor web part or a form web part
EndUserSharePoint.com: Top 10 Commented Posts | End User SharePoint on August 19th, 2009 4:00 am

[...] Dynamically Show/Hide Multiple Web Parts (29) Bryon Wyly [...]
Jamie Tomlinson on October 28th, 2009 1:09 pm

Sorry if this is off topic but I have a feeling that what I want to do could be achieved with some slight changes to the code on this page. I have created mutiple web parts for a page and have setup connectors between them. Does anyone know if there is a way to hide the consumer web parts until the relevant provider has ‘provided’ a value? I have found the visibility filter web part but am not the SP admin so cannot deploy a package. Any thoughts would be greatfully received.

TIA,

JamieT

Upcoming
Live Online Workshops

Ongoing Series

Authors

Jul

16

Dynamically Show/Hide Multiple Web Parts

Technical Expertise and Permissions needed:

Fix:

Here is what I came up with:

The code has three options:

Comments

31 Responses to “Dynamically Show/Hide Multiple Web Parts”

Leave a Reply

UpcomingLive Online Workshops

Ongoing Series

Authors

SharePoint Resources

Jul

16

Dynamically Show/Hide Multiple Web Parts

Technical Expertise and Permissions needed:

Fix:

Here is what I came up with:

The code has three options:

Comments

31 Responses to “Dynamically Show/Hide Multiple Web Parts”

Leave a Reply

Upcoming
Live Online Workshops