PDA

View Full Version : 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;


<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:

<!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>

ReginaldV
06-18-2015, 08:27 AM
Thanks a lot for your responses. I will give it a try. I will come back If I done get it right. Thanks again