I want to show or hide a web part on a page with the help of a simple HTML button.
SharePoint 2010, "Edit HTML source" feature (see image) helps a lot in doing so, as, with its help you can put an existing web part in a DIV tag and then you can change the 'display' property of that DIV tag.
As soon as you click on this the window that will open up will have a small code for your web part (that you want to show/hide).
Just at the start of that code write your DIV tag and also supply an ID to it, say,
<div id="Toggle" style="display: none;">
..... - web part code - ....
</div>
JavaScript:
Write a small code, that will look something like this:
----------------------------------------------------------------------------------------------------------------------------------
<html>
<head>
<script type="text/javascript" language="javascript">
function ShowWeb()
{
if (document.getElementById("Toggle").style.display == "block")
{
document.getElementById("Toggle").style.display = "none";
}
else
{
document.getElementById("Toggle").style.display = "block";
}
}
</script>
</head>
<body>
<input name="Button1" type="button" value="Show/Hide" onclick="ShowWeb()" style="width: 140px; height: 40px">
</body>
</html>
--------------------------------------------------------------------------------------------------------------------------------
Save this in a text file and upload it on your site.
Go to the page again and add a Content Editor web (CEWP) part just above your main web part. Edit this CEWP and in the URL section give the URL of the text file.
Save the page and that's it! The "toggle" button is ready to display or hide web part.
SharePoint 2010, "Edit HTML source" feature (see image) helps a lot in doing so, as, with its help you can put an existing web part in a DIV tag and then you can change the 'display' property of that DIV tag.
Just at the start of that code write your DIV tag and also supply an ID to it, say,
<div id="Toggle" style="display: none;">
..... - web part code - ....
</div>
JavaScript:
Write a small code, that will look something like this:
----------------------------------------------------------------------------------------------------------------------------------
<html>
<head>
<script type="text/javascript" language="javascript">
function ShowWeb()
{
if (document.getElementById("Toggle").style.display == "block")
{
document.getElementById("Toggle").style.display = "none";
}
else
{
document.getElementById("Toggle").style.display = "block";
}
}
</script>
</head>
<body>
<input name="Button1" type="button" value="Show/Hide" onclick="ShowWeb()" style="width: 140px; height: 40px">
</body>
</html>
--------------------------------------------------------------------------------------------------------------------------------
Save this in a text file and upload it on your site.
Go to the page again and add a Content Editor web (CEWP) part just above your main web part. Edit this CEWP and in the URL section give the URL of the text file.
Save the page and that's it! The "toggle" button is ready to display or hide web part.
I do not have the ability to edit the web part HTML from the properties menu. Is there a way to do it in sharepoint designer?
ReplyDelete