none
Minimize webparts in SharePoint 2013 RRS feed

  • Question

  • Hello,

    Is there a way in sharepoint 2013 to minimize and restore webparts without having to go into edit the page?  In 2010 you could get to the webpart menu without having to do this.  What am I missing?

    Thank you in advance

    Tuesday, April 16, 2013 9:35 PM

Answers

  • Hi Michael,

    Thank you for your reply, I was not able to get your code to work but I was able to get this working.  I could have been doing something wrong, but this seems to be working pretty well.  I found this here.

    http://designgala.com/how-to-expand-collapse-toggle-div-layer-using-jquery/

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" >
    jQuery(document).ready(function() {
      jQuery(".content").hide();
      //toggle the component with class msg_body
      jQuery(".heading").click(function()
      {
        jQuery(this).next(".content").slideToggle(500);
      });
    });
    </script>
    
    <div class="layer1">
    <p class="heading">Click Here</p>
    <div class="content">
            //content of webpart
    </div>
    </div>


    • Marked as answer by CSjule Tuesday, April 23, 2013 3:47 PM
    • Edited by CSjule Tuesday, April 23, 2013 5:39 PM Referencing where the information was found.
    Tuesday, April 23, 2013 3:42 PM

All replies

  • OOTB i dont think it is possible, use JQuery to make it collapsible.....

    Mark this post as answer if this resolves your issue.


    Everything about SQL Server | Experience inside SQL Server -Mohammad Nizamuddin

    Wednesday, April 17, 2013 4:32 AM
  • Hello,

    Thank you for your reply.  Would you have any instructions that would help implement that type of solution?

    Thanks,
    Chip

    Wednesday, April 17, 2013 5:12 PM
  • Hi,

    Wrap all content of your webpart in div with some id, add some button (or another element) click on which will be used to collapse the webpart. Add JavaScript to collapse div on onclick event. So, it can look something like that:

    <a href="#" id="CollapseButton">Collapse it</a>
    <div id="MyCollapsibleDiv">
           //Content of the webpart
    </div>
    <script>
       $('#CollapseButton').click(function() {
           $('#MyCollapsibleDiv').toggle();
       });
    </script>
    PS: don't forget to include jquery library.

    Regards, Michael



    • Edited by MikhailSP Tuesday, April 23, 2013 6:36 AM
    • Proposed as answer by Shp2013_Beginner Tuesday, April 23, 2013 6:37 AM
    • Unproposed as answer by CSjule Tuesday, April 23, 2013 3:10 PM
    Tuesday, April 23, 2013 6:34 AM
  • Hi Michael,

    Thank you for your reply, I was not able to get your code to work but I was able to get this working.  I could have been doing something wrong, but this seems to be working pretty well.  I found this here.

    http://designgala.com/how-to-expand-collapse-toggle-div-layer-using-jquery/

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" >
    jQuery(document).ready(function() {
      jQuery(".content").hide();
      //toggle the component with class msg_body
      jQuery(".heading").click(function()
      {
        jQuery(this).next(".content").slideToggle(500);
      });
    });
    </script>
    
    <div class="layer1">
    <p class="heading">Click Here</p>
    <div class="content">
            //content of webpart
    </div>
    </div>


    • Marked as answer by CSjule Tuesday, April 23, 2013 3:47 PM
    • Edited by CSjule Tuesday, April 23, 2013 5:39 PM Referencing where the information was found.
    Tuesday, April 23, 2013 3:42 PM
  • Good!

    Really, I didn't test my code, it was just to explain the idea.

    Now, you have shown the ready-to-use snippet and have made life of people with the same quistion in future a bit easier. :-)

    Regards, Michael.

    Tuesday, April 23, 2013 3:49 PM
  • I found the accordion to be best for web parts. Select an h3 tag to open the div underneath and it closes the other tabs.

    https://jqueryui.com/accordion/

    <script>
    $( function() {
    $( "#accordion" ).accordion();
    } );

    </script>

    <div id="accordion">
    <h3>Section 1</h3>

    <div>

    //Put web part here

    </div>

    </div>

    Wednesday, May 31, 2017 4:35 PM