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.
No comments:
Post a Comment