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>