Expandable lists that expand and collapse with one click

Question

I have a lot of text based lists on one page, so I threw them into content editor web parts so i can expand / minimize the lists. However, two clicks (one on the arrow and then one on "restore") is becoming really tiresome. How can I make expandable lists that expand and collapse with one click? AND they are still editable from the wysiwyg browser editing tool?

I have already tried using Jquery to create expandable content, but the problem here is that the content can't be edited in the wysiwyg browser based editor - the expand or collapse button doesn't "work" when you are in the edit mode, so you can never see the expandable content to edit. I can change the content in the code but it's no good if my non-coder co-workers can't also edit it.

Again, how can I make expandable/collapse-able lists that expand and collapse with one click? AND they are still editable from the wysiwyg browser editing tool?

This is my current code for the expandable lists that I can't edit in the wysiwyg.

<script>
$(document).ready(function(){
    $(".category-qms-expand").click(function(){
        var id = $(this).attr("id");
    var name = id.split("-")[1];
    $("#category-qms-" + name).toggle(400);
    if($(this).html() == "CLOSE"){
        $(this).html("EXPAND");
    }
    else{
        $(this).html("CLOSE");
    }
    return false;
});
});
</script>




<span> <a href="#" class="category-qms-expand" id="expand-cat1">EXPAND</a>Category Heading</span>
<div id="category-qms-cat1" style="display:none">
Expandable content in Category 1.
</div>

Try putting your jQuery in a Script Editor web part instead of the CEWP — Michael Colbs, Jul 08 '14 at 22:05
I do not know what this is. Where do I find this web part? Also, my current jquery is on the master page. I am no longer using any CEWP — Megan, Jul 09 '14 at 13:48

score 1 · Accepted Answer · answered Jul 09 '14 at 14:51

1

I just found the answer myself here: http://blog.pathtosharepoint.com/2008/10/25/expandcollapse-buttons-for-your-web-parts/

Worked perfectly. Allows open and close of CEWP with one click, and you can still edit their content in the wysiwyg editor.

answered Jul 09 '14 at 14:51

Megan

11
1
1
4

Beat me to it by 7 seconds. Good sln! – Michael Colbs Jul 09 '14 at 14:52
your solution is still different and useful! Thanks! – Megan Jul 09 '14 at 18:18

score 0 · Answer 2 · edited Apr 13 '17 at 12:41

How about wrapping your script in an Edit Mode check? Then the lists will be expanded while editing.

var editMode = document.forms[MSOWebPartPageFormName].MSOLayout_InDesignMode.value;

if (editMode != '1')
{
   $(document).ready(function(){
      $(".category-qms-expand").click(function(){
       var id = $(this).attr("id");
       var name = id.split("-")[1];
       $("#category-qms-" + name).toggle(400);
       if($(this).html() == "CLOSE"){
         $(this).html("EXPAND");
       }
       else{
         $(this).html("CLOSE");
       }
       return false;
     });
  });
}

Expandable lists that expand and collapse with one click

2 Answers2