Question

I need some help. I’m looking to have a sidebar that toggles when a specific button is pressed. The sidebar will show up and the content div will reduce in width to make room for the sidebar. The content div will widen back out once the sidebar button is clicked to hide it again. I can’t seem to get the sidebar to work at all.

http://jsfiddle.net/jhacks/P3Ckk/54/

I had to change things a bit to get it to fit well into the fiddle box, which seemed to unfortunately make things worse. For instance, making the “content” div any wider pushes it downward for some reason? But I digress… the main issues I’m looking to solve:

1. I can’t even get the sidebar to show up when I click the “sidetoggleshow” button. I am clearly doing something blatantly wrong with my jquery code?

2. I am not sure what the correct solution is to have the content div expand to fill the remaining space of it’s container div when the sidebar is hidden. However, when the sidebar shows up, I’d like the content to be pushed over. The positioning of my sidebar within the html could be partly the issue. Currently, I made it a sibling to the toggle button, so it’s within the topbar div. However, perhaps it must be a part of the container div? So that it takes up space within the same div the content is located? What would I reference within the jquery? I suppose since it’s a unique ID I don’t need any “siblings” or “children” tags at all then? Again, I did try this but it didn’t work… then again, it isn’t working with the siblings method either

Any and all help greatly appreciated. Thanks!

Answer 1

Seems like you know that you need to have two states, but you need to differentiate between them in the .click() method itself, not register the click handler two times.

I’ve fiddled with the snippet a bit and edited the JS and CSS code and added comments, so it should be pretty self explanatory. Also, I assume you want the sidebar to be hidden by default.

http://jsfiddle.net/P3Ckk/78/

Hope it helps!