Collapsible Right Column

**ReginaldV** · 06-12-2015, 10:57 AM

Good day everyone.

I am trying to have a collapsible column inside the canvas very similar to what's on the homepage of this forum here http://www.dynamicdrive.com/forums/ (Blog entries column). I would like it to collapse (from left to right as well and have collapsible inside panels. Is there a script on this website that can help me achieve this. I have tried a couple of jQuery scripts but none really does what I want.. Any assistance will be greatly appreciated. P.S I don't know javascript that well

Regards,

**Beverleyh** · 06-12-2015, 02:12 PM

You can do it with a simple display:block; / display:none; JavaScript switch.

Something like;

Code:

<script>
function showhide(id){
	var e = document.getElementById(id);
	e.style.display = (e.style.display != 'none' ? 'none' : 'block'); 
	}
</script>



[<a href="#" style="text-decoration:none" onclick="showhide('block-01');this.innerHTML=(this.innerHTML=='+')?'-':'+';">+</a>]
<div id="block-01">
	<p>blah</p>
	<p>blah</p>
	<p>blah</p>
</div>

If you need more help, please provide a link to your page.

**molendijk** · 06-12-2015, 02:33 PM

Jquery:

Code:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>slide demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<style>
#toggle {
width: 150px; border: 1px solid black; padding: 10px ;
 }
</style>

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

</head>
<body>
 
<p id="toggle_it">TOGGLE BOX</p>
<div id="toggle">
aa<br>
bb<br>
cc<br>
</div>
 
<script>
$('#toggle_it').click(function() {
$( "#toggle" ).toggle( "slide" );
});
</script>
 
</body>
</html>