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.
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.