0

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 8 '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 9 '14 at 13:48
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.

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

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?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.