1 answer
1 accepted
I've tried to put there also Confluence space key but no luck with that too. When I try to manually add the macro to the page it recognizes the "include page" macro without problem. Just for reference I'm adding the complete code (updated after your comments).
<style>
/* Style the button that is used to open and close the collapsible content */
.collapsible {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 10px;
width: 100%;
outline: none;
font-size: 32px;
font-variant-caps: all-small-caps;
margin-bottom: 10px;
margin-top:30px;
border: 1px;
border-top-style: dashed;
border-bottom-style: dashed;
display: block;
text-align: left;
}
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible:hover {
background-color: #ccc;
}
/* Style the collapsible content. Note: hidden by default */
.content {
padding: 0 18px;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
background-color: #f1f1f1;
}
</style>
<button class="collapsible" id="collapsible-button">Open Collapsible</button>
<div class="content" id="content-placeholder"></div>
<script type="text/javascript">
AJS.toInit(function() {
document.getElementById("collapsible-button").onclick = function(event) {
document.getElementById("content-placeholder").innerHTML = '$action.getHelper().renderConfluenceMacro("{include:LE Team Sample Page}")';
}
})
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
});
}
</script>
BTW I'm adding the HTML code to HTML macro on the page so in edit mode it basically looks like this:
Hi @PGhostek ,
In the User Macro you have attached, there is an issue on line:
content.style.maxHeight = null;Regardless of that, the User Macro works but it does not display the content due to the Javascript error from above. If you Inspect HTML content, you will notice div#content-placeholder has the DOM included.
Anyway, is there any particular reason for you not to use https://confluence.atlassian.com/doc/expand-macro-223222352.html ? Here is an example:
## Macro title: My Macro 4 Community
## Macro has a body: N
## Body processing: Rendered
## Output: HTML
##
## Developed by: Rafael Pinto Sperafico
## Date created: 04/09/2019
## Installed by: Rafael Pinto Sperafico
## This is an example macro
## @noparams
<style>
/* change the style for expand macro title text */
#com-atlassian-confluence .expand-control-text {
color: #800;
font-weight: bold;
}
</style>
<script>
AJS.toInit(function(){
AJS.$('.expand-control-text').text('Expand');
AJS.$('.expand-control-text').on('click', function(event) {
var display = event.target.parentNode.nextSibling.style.display;
if (display == 'block') {
event.target.innerText = 'Expand';
} else {
event.target.innerText = 'Collapse';
}
});
})
</script>
<ac:macro ac:name="expand">
<ac:rich-text-body>$action.getHelper().renderConfluenceMacro("{include:FOO:Page A}")</ac:rich-text-body>
</ac:macro>
<ac:macro ac:name="expand">
<ac:rich-text-body>$action.getHelper().renderConfluenceMacro("{include:BAR:Page B}")</ac:rich-text-body>
</ac:macro>
As a result, you would have:
Content A comes from FOO:Page A
Content B comes from BAR:Page B
Hope the above helps.
Kind regards,
Rafael
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.