programatically add minimize and maximise buttons to web parts in sharepoint 2013

Question

I would like to programmatically add minimize and maximise buttons to web parts in Sharepoint 2013.

We have migrated from Lotus notes web editor which gave the option to do something similar out of the box. with:

Arrow heads that collapsed and expanded sections when the user clicked. I appreciate that there is nothing out of the box that will replicate this so it looks like code is going to be the only option. Can anyone advise a method for this please?

Answer 1

If you are open to editing page in SharePoint Designer, then you can use following logic using JavaScript.

1. Place a div tag around the web part

   <img src="MaximizeImage" id="webpartitleMaximize" onclick="Maximize()"/>
   <img src="MinimizeImage" id="webpartitleMinimize" onclick="Minimize()"/>
   <div id="webparttitle">            
       <!-- Actual Webpart goes here -->
   </div>
   

2. Add following script

   <script type="text/javascript">
       function Maximize(){
           document.getElementById("webparttitle").style.display = "block";
       }
       function Minimize(){
           document.getElementById("webparttitle").style.display = "none";
       }
   </script>