Show/Hide Button on SharePoint Web Part

Today I want to show you my simple solution how to customize SharePoint Web Part in that way you have Show/Hide Button in Title cell of Web Part. Everything you need is JQuery and some lines of JavaScript code.

You could find a simple Show/Hide Web Part Example on my GitHub repository.

Of course we need empty Visual Web Part. I called it ShowHideVWP.

Firstly, add JQuery and custom showhidevwp.js script reference into Web Part ASCX page:

<script type="text/javascript" src="_layouts/15/ShowHideVWP/script/jquery-2.2.0.min.js"></script>
<script type="text/javascript" src="_layouts/15/ShowHideVWP/script/showhidevwp.js"></script>

After that add div element with showhidevwp-content class name and default display:none style. Add some test content inside of that div.

<div class="showhidevwp-content" style="display:none;">
    <asp:Label ID="lbEmpty1" runat="server" Text="Empty 1:"></asp:Label><br />
    <asp:TextBox ID="tbEmpty1" runat="server"></asp:TextBox><br />
    <asp:Label ID="lbEmpty2" runat="server" Text="Empty 2:"></asp:Label><br />
    <asp:TextBox ID="tbEmpty2" runat="server"></asp:TextBox><br />
    <asp:Button ID="btnEmpty1" runat="server" Text="Submit" />  <asp:Button ID="btnEmpty2" runat="server" Text="Clear" />
</div>

And the main file – showhidevwp.js. There we have two things -> first is inside document.ready, where we add code for rendering Show/Hide button in Title cell of our Web Part.

$(document).ready(function () {
    var divShowHideVWPContent = $("div.showhidevwp-content");
    var divChrome = divShowHideVWPContent.closest('div.ms-webpart-chrome');
    var h2Title = divChrome.find('span.js-webpart-titleCell h2 nobr');

    if (h2Title.find("img.showhidevwp-img").length == 0) {
        h2Title.append("<span style=\"float:right; padding-right:5px; padding-top:2px;\"><img class=\"showhidevwp-img\" src=\"/_layouts/15/images/ShowHideVWP/appbar.chevron.down.png\" width=\"20\" style=\"cursor:pointer; float:right;\" onclick=\"ShowHideOnClick(this); return false;\"/></span>");
    }
});

Second is ShowHideOnClick function which is called everytime user click on Show/Hide button.

function ShowHideOnClick(element) {
    var divChrome = $(element).closest('div.ms-webpart-chrome');
    var divShowHideVWPContent = divChrome.find("div.showhidevwp-content");
    var h2Title = divChrome.find('span.js-webpart-titleCell h2 nobr');

    if (divShowHideVWPContent.css("display") != "none") {
        divShowHideVWPContent.css("display", "none");
        h2Title.find("img.showhidevwp-img").attr("src", "/_layouts/15/images/ShowHideVWP/appbar.chevron.down.png");
    }
    else {
        divShowHideVWPContent.css("display", "");
        h2Title.find("img.showhidevwp-img").attr("src", "/_layouts/15/images/ShowHideVWP/appbar.chevron.up.png");
    }
}

[ Complete code on GitHub ]

Cheers!
Gašper Rupnik

{End.}