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

This widget could not be displayed.

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!

This widget could not be displayed.
Stephen Deutsch Community Champion May 06, 2015

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

Stephen Deutsch Community Champion May 06, 2015

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.

This widget could not be displayed.

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>
This widget could not be displayed.

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?

This widget could not be displayed.

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
Posted Monday in Confluence

Why start from scratch? Introducing four new templates for Confluence Cloud

Hi my Community friends!  For those who don't know me, I'm a product marketer on the Confluence Cloud team - nice to meet you! For those of you who do, you know that I've been all up in your Co...

383 views 3 6
Join discussion

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