nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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

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

Accepted answers

Alexander Horn

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

All comments

Alexander Horn

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

Rashid Bakhmudov

Thank you Alexander for good advice!

Stephen Deutsch

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

Rashid Bakhmudov

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

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

Rashid Bakhmudov

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.

Dustin Sterkenburg

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>

Dustin Sterkenburg

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?

mike_marcuzzi

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

Welcome!

It looks like you're new here. Sign in or register to get started.

Quick Links

Find more posts tagged with

confluence

expand