Is there is way to collapse Expand objects while editing page?
Asked by Rashid Bakhmudov:

On my page there are many Expand objects with content that includes pictures and instructions. Adding new staff somewhere in the middle becomes frustrating, due to scrolling and positionning in right place.

Is there are any macro that make Expand object collapsible when I'm editing the page?

Thank you!

Rashid Bakhmudov


Answers:
author: Alexander Horn
body: Hi!

I dont know how. But I would recomend to use pages as small as possible and include them in overview pages. Just for best practice.

Best regards

comments: author: Rashid Bakhmudov
body: Thank you Alexander for good advice!


author: mike_marcuzzi
body: I keep running into this. It would be good to know if it's on Atlassian's radar!


author: Dustin Sterkenburg
body: An issue I ran into, when enabling collaberative editing, this code does not work. Does anyone happen to know why? Are modifications to the DOM ignored?


author: Dustin Sterkenburg
body: To elaborate on this, I have updated it to account for the AJAX call when you now click edit on a page. I have also collapsed the sections by default:

```
<script>var ready = true; //Flag to only run this once as multiple AJAX calls can trigger.$( document ).ajaxComplete(function( event,request, settings ) {    //Collapse macros in edit mode   if (ready){    if ( document.URL.indexOf("editpage.action") >= 0 ) {      var macros = document.getElementById('wysiwygTextarea_ifr').contentDocument.getElementsByClassName("wysiwyg-macro");      for (i = 0; i < macros.length; i++) {           macros[i].childNodes[0].childNodes[0].style.display = "none";  //set macro body default to collapsed          macros[i].onclick = function(event) {          if (event.target.nodeName.toLowerCase() == "table" && event.target === this) {            if (this.childNodes[0].childNodes[0].style.display === "table-row") {              this.childNodes[0].childNodes[0].style.display = "none";            } else if (this.childNodes[0].childNodes[0].style.display === "none") {              this.childNodes[0].childNodes[0].style.display = "";            } else {              this.childNodes[0].childNodes[0].style.display = "table-row";            }          }        }      }     ready = false;    }   }  });</script>
```


author: Stephen Deutsch
body: Hi Rashid,

Just in case you'd still like to be able to expand/collapse macros in edit mode, I wrote this little script that can do that. You need to simply insert this javascript in the custom HTML on the administration page at the end of the HEAD:

```
&lt;script&gt;  AJS.toInit(function(){    // Can collapse macros in edit mode    if ( document.URL.indexOf("editpage.action") &gt;= 0 ) {      var macros = document.getElementById('wysiwygTextarea_ifr').contentDocument.getElementsByClassName("wysiwyg-macro");      for (i = 0; i &lt; macros.length; i++) {         macros[i].onclick = function(event) {          if (event.target.nodeName.toLowerCase() == "table" &amp;&amp; event.target === this) {            if (this.childNodes[0].childNodes[0].style.display === "table-row") {              this.childNodes[0].childNodes[0].style.display = "none";            } else if (this.childNodes[0].childNodes[0].style.display === "none") {              this.childNodes[0].childNodes[0].style.display = "";            } else {              this.childNodes[0].childNodes[0].style.display = "table-row";            }          }        }      }    }  });&lt;/script&gt;
```

Then, you can click twice (it doesn't have to be double-click) on a macro to hide the body and click once more to show it again. This only works on Internet Explorer 9+, and I couldn't test it completely, but the only problem I could find is that you can no longer double-click on macros embedded inside of other macros to show the macro options (but you can still show them by clicking the "Edit" button). Maybe it will work for you, maybe not. Try it out and see :smile:

comments: author: Rashid Bakhmudov
body: Hi Stephen,I tried to put it and nothing is happend. I tried to open pages with Chrome and IE 11, same thing. Double click still opens editing macro window.What could be the reason? Confluence of version 5.7.3 is installed in Windows Server 2012. Thank you for your help!Rashid Bakhmudov


author: Stephen Deutsch
body: I changed the code slightly above, one of the variables that Atlassian provides wasn't behaving as expected. It should work now :)


author: Rashid Bakhmudov
body: Sorry to say it, but it still not work from my side. Same behavior when I double click. Expand macro is not collapsing in edit mode.


Tags: expand