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>