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>

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

Answer 2

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;
     });
  });
}

More info from this post:

How do I know if the page is in Edit Mode from JavaScript?