How to hide side bar in Confluence 5.1.3 for default theme only for some pages in a Space

[Kapil Bolli]

Hi,

I want to hide side bar in Confluence 5.1.3 for default theme only for some pages in a Space.

I have gone through many links in Answers, but none of them is working for me.

Thanks

Kapil

[CharlesH · Accepted solution]

I've tackled the same issue. The following code should be placed in a HTML macro as it relies on Javascript (specifcially the AJS library built into Confluence). I put all of this into a page in a "resources" space, and then just include that page in the pages I want to hide the left side bar for.

<script type="text/javascript">
//<![CDATA[
AJS.toInit(function(){

  //hide the side bar
  AJS.$('div.ia-splitter-left').hide();
  
  //reset margin of main content area
  AJS.$('div#main').css({'margin-left':'0px'});

  //reset margin of the footer
  AJS.$('#footer').css({'margin-left':'0px'});

});
//]]>
</script>

[Sam Hall]

Thanks for this Davin and Charles! I find the user macro option was a good one, however we don't want to change the users side bar settings globally. So I used a combination of both your answer and developed this...

## Macro title: Collapse Nav
## Macro has a body: N
## Developed by: Sam Hall (original version from Davin Studer with some CSS ideas from CharlesH)
## Date created: 26/05/2014
## Collapse the nav on page access, without touching the global user setting.
## @noparams

<script type="text/javascript">//<![CDATA[
AJS.toInit(function () {
  if(AJS.$('.ia-fixed-sidebar.collapsed').length == 0) {
    AJS.$('div.ia-fixed-sidebar').addClass('collapsed').css('width','55px');
    AJS.$('div#main').css({'margin-left':'55px'});
  }
});
//]]></script>

[Davin Studer]

You could also do this with a user macro. I was doing this on our site using an html macro for a while and got tired of copying the JS code, so I made a user macro to do it. Here is what I did..

Macro Name:
collapsenav

Macro Ttle:
Collapse Nav

Description:
Collapse the nav on page access.

Macro Body Processing:
No macro body

Template:
## Macro title: Collapse Nav
## Macro has a body: N
## Developed by: Davin Studer
## Date created: 08/20/2013
## Collapse the nav on page access.

## @noparams

<ac:macro ac:name="html">
<ac:plain-text-body><![CDATA[<script type="text/javascript">
AJS.toInit(function () {
if(AJS.$('.ia-fixed-sidebar.collapsed').length == 0) {
AJS.$('.ia-fixed-sidebar .space-tools-section .expand-collapse-trigger').click();
}
});
</script>]]></ac:plain-text-body>
</ac:macro>

[Kapil Bolli]

Hi Daven,

Thanks

I tried using your macro, but it is not working for me.

Kapil

[Davin Studer]

Odd. It should work for the default theme. Basically, instead of setting CSS values manually my script is just programmatically clicking the collapse link. Oh well if the other one works then that is probably a good way to go. You may still want to encapsulate it in a user macro so that it is much easier to add to any page you want.

[Nathon Fowlie]

Try calling this instead of setting the CSS, it's a bit more future proof because it uses the Atlassian javascript library instead of relying on specific HTML elements.

AJS.Confluence.Sidebar.toggle();