Expandable sidebar

Expandable sidebar

[Aris Bezas]

[-- Attachment #1: Type: text/plain, Size: 287 bytes --]

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

Thanks in advance.

Aris Bezas


[-- Attachment #2.1: Type: text/html, Size: 627 bytes --]

[-- Attachment #2.2: expandable-sidebar.zip --]
[-- Type: application/zip, Size: 80516 bytes --]

[-- Attachment #2.3: Type: text/html, Size: 147 bytes --]

Re: Expandable sidebar

[Ian Barton]

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.