...
If you wish to use this, note that the collapsing&expanding part of the page must be given the class "collapseExpand", for instance with a <div> element.
...
| Multiexcerpt macro |
|---|
|
| HTML |
|---|
<style type="text/css">
.myButton {background-color: #80a8e6; font-size: 14px;}
.myButton:hover {background-color: #0052cc; color: #ffffff;}
/* adjust headings 5 & 6 for use with expansion javaScript */
.collapseExpand h5 {color: #345290; font-size: 18px; font-weight: normal; margin-top: 10px;}
.collapseExpand h6 {color: #5c5c5c; font-size: 15px; font-weight: bold; margin-top: 10px;}
.collapseExpand p {font-size: 13px; margin-top: 6px;}
.collapseExpand p:first-child {margin-top: 0px;}
.collapseExpand .expandArrow {width:0; height:0; border-width:0.3em; border-style:solid; float:left; margin-top:0.5em; margin-right:0.1em; display: inline;}
</style> |
|
...
| Multiexcerpt macro |
|---|
|
| HTML |
|---|
<script type="text/javascript">
// jQuery automatically included in Confluence, accessed through the object AJS
var container = '.collapseExpand'; // what will surround the collapsing elements
var openArrow = 'black transparent transparent';
var closArrow = 'transparent transparent transparent black';
AJS.toInit(function(){
// protect against running it twice
if (document.getElementsByClassName('expandArrow').length > 0) {
return;
}
var h5i = 0, h6i = 0;
// this uncommon selector $(X,Y) gets all X that are descendants of Y
AJS.$('h5,h6',container).each(function(index){
this.style.cursor = "pointer";
if (this.nodeName == 'H5') { // make better anchors than Confluence, automated
var anchor = 'a'+(++h5i); h6i=0;
} else {
anchor = 'a'+h5i+'s'+(++h6i);
}
AJS.$(this).prepend('<div class="expandArrow" style="border-color:' + closArrow + ';" />' +
'<a id="' + anchor + '" />');
// Next line commented out because Confluence controls IDs for headers
//this.id = this.nodeName+'_'+index;
AJS.$(this).nextUntil('h1,h2,h3,h4,h5'+(this.nodeName=='H5'?'':',h6'))
.wrapAll('<div id="'+this.id+'_div" />') // don't really need the id
.parent().hide(); // start with everything hidden
AJS.$(this).click(function(){
toggleSection($(this));
});
});
if (window.location.hash) { // test for anchor in URL
var $head = AJS.$(window.location.hash).parent().parent();
if (!$.isEmptyObject($head)) { // the hash might not match an anchor
toggleSection($head);
$head = $head.parent().prev('h5'); // in case hash is to an h6 anchor
if (!$.isEmptyObject($head)) {
toggleSection($head);
} } }
});
function showAll(action){ // 1 for show, 0 for hide
toggleSection(AJS.$('h5,h6',container).next('div:'+(action?'hidden':'visible')).prev());
}
function toggleSection($head){ // head is heading that was clicked, or a group
$head.each(function(){
var collapsed = ($(this).next().css("display") == "none");
$(this).next().toggle('fast');
$(this).children('.expandArrow').css("border-color", collapsed ? openArrow : closArrow);
});
}
</script> |
|
...