Re: Expandable sidebar

[Ian Barton <lists@wilkesley.net>]

On 16/11/11 19:03, Aris Bezas wrote:
> Hi there,
>
> I am building an academical site with orgmode-emacs (http://earlab.org/).
> I want to implement an expandable sidebar but a have a problem to do it.
> I am sending the files of my implementation ->
> http://igoumeninja.org/org/index.html
>

You can do this using jQuery. In the head section of your html you need:


<!-- jQuery stuff. -->
    <script 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" 
type="text/javascript"></script>

    <script src="./files/js/show-hide.js" type="text/javascript"></script>


The show-hide.js looks like:

$(document).ready(function() {
   $('div.outline-3> div').hide();
   $('div.outline-3> h3').click(function() {
   $(this).siblings('div').toggle();
		return false;
   }).siblings('div').hide();


This will hide any headers under the div with class=div.outline-3. If 
you click on a header with this class visibility of all it's 
sub-headings wil be toggled.


You might also want to have a look at the TableOfContents Plugin for 
jQuery by Doug Neiner, which will auto generate a TOC for you.

Ian.