CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
cashman04
cashman04

Reputation: 1173

Add full height button to right side of div

I am using this link to have a side bar that I can hide or display. How can I add a bar to the right side of the div, that I can click to trigger the hide/show?

So far I found I can do a border-right: 5px solid black in css to make a basic one.. But I actually have no clue how to make it clickable.. I'm sure there might be a name for what I want to add, but I have no clue what it is.

Any help would be appreciated.

EDIT:

Got it working with that jsfiddle. But then I messed with it to try and move it to the main content div so on hover it can expand out to the right, and also not hide after hiding side panel(which could be fixed with the css for the panel toggle) Here is my modified jsfiddle, but I can't seem to click it for some reason.

Upvotes: 0

Views: 150

Answers (1)

Andrew Lerma
Andrew Lerma

Reputation: 39

edited the fiddle to something closer to what I think you needed: http://jsfiddle.net/y7L2qvy6/18/

**My apologies.

You're trying to add something like this then, right?

http://jsfiddle.net/y7L2qvy6/3/

**

The opening and closing of the navigation div is achieved with:

<a href="#menu-toggle"><!--put whatever text or image you like here--></a>

and requires that you are including jquery, bootstrap, and the following script:

<script src="js/jquery.js"></script>
<script>
$("#menu-toggle").click(function(e) {
    e.preventDefault();
    $("#wrapper").toggleClass("toggled");
});
</script>

Keep in mind that you must instruct the browser to load jquery before trying to run the script, like in the example above.

Finally, also make sure that all page content is inside of a div with an id of "page-content-wrapper", and that div must be inside of a div named "wrapper".

like so:

<body>
<div id="wrapper">
<div id="sidebar-wrapper">
<!-- Navigation Content Here -->
</div>
<div id="page-content-wrapper">
<!-- Page Content Here -->
</div>
</div>
<script src="js/jquery.js"></script>
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
</body>

Upvotes: 1

Related Questions