How to create a collapsable sidebar

  • Hi,

    I’m developing a theme with a sidebar on the left and the body content on the right, i’m hoping to make the sidebar so it can collapse to a much thinner bar at the click of a button, then the body content will fill the space created from collapsing the sidebar. I know this will likely require some javascript; but i’m hoping somebody can point me in the right direction to learn how to approach this.

    Any ideas?

    Thanks

    • This topic was modified 3 years, 6 months ago by Jackie Chan.
Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator bcworkz

    (@bcworkz)

    You essentially need two sets of CSS rules (can be on one stylesheet still), one for a wider sidebar, another for thinner. While JavaScript can manipulate element CSS directly, it’s usually easier to relate one appearance to a specific element class that JS can remove or add to particular elements on a click event.

    Sidebar size is typically managed through CSS width: properties, but other adjustments may be necessary, depending on the theme.

    Thread Starter Jackie Chan

    (@jackie-chan)

    Thanks that’s made it much clearer for me, as for the sidebar itself; it will include a menu which when collapsed to the thinner sidebar will show icons rather than the page titles, would you just approach this with CSS?

    Yes I would approach the the way @bcworkz suggests. JavaScript will look for interaction of the collapsing/uncollapsing of elements and it will tell the CSS to hide and show the page titles and icons.

    Here is a quick example of how you would change the width:
    https://codepen.io/guzmanariel/pen/RwpZWpB

    You can apply something similar to hiding and showing those icons

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘How to create a collapsable sidebar’ is closed to new replies.