Is there is way to collapse Expand objects while editing page?

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

5 answers

1 accepted

2 votes
Answer accepted

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

Thank you Alexander for good advice!

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:

<script>
  AJS.toInit(function(){
    // Can collapse macros in edit mode
    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].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";
            }
          }
        }
      }
    }
  });
</script>

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

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

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

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.

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>

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?

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

Suggest an answer

Log in or Sign up to answer
Community showcase
Published Mar 12, 2019 in Confluence

Confluence Admin Certification now $150 for Community Members

More and more people are building their careers with Atlassian, and we want you to be at the front of this wave! Important Dates Start the Certification Prep Course by 2 April 2019 Take your e...

1,083 views 2 13
Read article

Atlassian User Groups

Connect with like-minded Atlassian users at free events near you!

Find a group

Connect with like-minded Atlassian users at free events near you!

Find my local user group

Unfortunately there are no AUG chapters near you at the moment.

Start an AUG

You're one step closer to meeting fellow Atlassian users at your local meet up. Learn more about AUGs

Groups near you