Indexhibit^TM
Index + Exhibit

The nice folks over at Criterion have a tutorial on how to make a collapsable menu.

Interesting for those of you who are learning php, as it shows you how to approach code to find the appropriate info.

We will toast to this tutorial with a nice sidra!

We need a formal spot on the site for tutorials soon I guess. ;)

Perfect, this is exactly what I need. But first I need to learn spanish ;)

I think i solved this cuestion in a easier way than skeku at criterion, using jquery 1.2.1 and not mootools. Some people asked me about this so i´ll post here the code:


// First we hide all exhibitis


If you like to check my indexhibit site you´ll see the result.

Sorry for my bad english!

thenine, i have been trying like crazy to get your code to work. can you possibly take a swing by my site and let me know what i am doing wrong?

the site is www.typeconstruct.com

the path to the .js file is
http://typeconstruct.com/ndxz-studio/site/js/collapsable.menu.thenine.js

the path to the template where i (think i am) calling the .js file is
http://typeconstruct.com/ndxz-studio/site/sample/index.php

since i am not a coder, i am sure i am doing something wrong that is simple, but i have no idea what.

thanks!

Hey Mitch:

Here's the problem...when you grabbed his code you also grabbed the code for a file you don't have 'jquery-1.2.1.min.js'. You do have 'jquery.js'.

I believe that you need version 1.2.1 or great in order to make his script work...so head over to Jquery.com and grab their latest version (think it's 1.2.3) and simply copy that code over your jquery.js...and be sure to change the file name back in your template.

Should work then. Keep us posted.

And also...thanks 'thenine' for posting that.

I keep saying this...and it will happen soon enough...but the next version of Indexhibit will make these things just a bit easier to pull off.

that was it! thanks vaska. (and thenine!)

so while we are here, another question (what the hell, may as well ask):

is there any way to make the code close open menus when clicking on a different menu? in other words if B is open and i click on C, B closes automatically?

thanks!

My intention was to hide all categories except for the one that has the exhibit active. So you need to rewrite the script if you want another behavior.

Anyway, reading jquery reference you´ll find so easy to apply your ideas. I´m not developer, just an eager designer, and i did this...

Here we go...when something is clicked we hide all sections first THEN we show the active section...


// First we hide all exhibitis $("#menu ul li.section-title").nextAll().hide();


// This is the toggle function
// first it hides all sections
$("#menu ul li.section-title").click(function()
{
$("#menu ul li.section-title").nextAll().hide();
$(this).nextAll().slideToggle("fast");
});

It's not tested...let me know how it goes.

After the next version of Indexhibit is released I'm going to make this into an official plugin...crediting to thenine as well. ;)

Reading this code i think this was logical...

Thanks Vasca!

pd. it works fine.

Hello

I've done something similar on my site but only wanting some of the menus collapsable. If you want, you can use the following javascript. Include it in your template:
www.rosscairns.com/downloads/expandingMenus.js

Then in the:


$(document).ready(function() {


part of the template you can add:


expandingMenu(1);


where the number is the menu section you want to make collapsable (0 being the first section)

e.g. i've used:


expandingMenu(1); expandingMenu(2);


over at my site to make the 2nd and 3rd menu collapsable.

I guess this way could be implemented in the admin panel easily enough?

thanks vaska - it works nearly perfectly, and thats just fine and dandy by me :) still need to test it on windows.

you can see it in action at our site (still adding and tweaking some of the content as we speak so its a bit rough)

any chance you could give a bit more a step by step guide for the less html literate?.. like where the code goes.. in what file.. etc ?
I can't seem to work it out ..
any help would be greatly appreciated ..

Hi All

This is the one thing ive been really trying to tackle so the same request as ohgee really, could anyone point me where to put the .js file and also where to put the code mentioned about as i cant see where it fits in the style.css??

Any help would be really appreciated!

here goes....
this relates to the example i've giving above

step 1
in the Settings part of the admin panel, turn advanced mode on, and choose the theme 'sample'.

step 2
download the .js file from http://www.rosscairns.com/downloads/

step 3
put it into the folder on your website:
/ndzx-studio/site/js/

step 4
in the folder /ndzx-studio/site/sample/ edit the index.php file

step 5 in this file you should see something like:
<script type='text/javascript' src='<%baseurl%>
<%basename%>
/site/js/cookie.js'>
</script>


beneath this add:
<script type='text/javascript' src='<%baseurl%>
<%basename%>
/site/js/expandingMenus.js'>
</script>


step 6 find the bit that says:
$(document).ready(function() { setTimeout('move_up()', 1); });


beneath the setTimeout line add expandingMenu(1); where the number is the menu you want to be collapsable (the 1st one being 0). so for example if you want the the 1st and 3rd menu to be collapseable it would look like this:
$(document).ready(function() { setTimeout('move_up()', 1); expandingMenu(0); expandingMenu(2); });


step 7
save it
that should be it. any questions just ask...

the line breaks in my post could get you into trouble so i've put up a 'how to' at http://www.rosscairns.com/downloads/ as well....

guys, your scripts works beautifully.

Ross: only thing I would like to alter, is that when I press a different
section title, the active sections close and then the new opens.

Tried to mash it up myself, but im rather new to javascript so
didnt quite work out.. :)

Think you could give it a shot?
Thanks anyway.

Hi there...
well i got it work with Vaska's Script and thenine's .js...but compared to most of the other sites with collapsable menus, mine stays with all exhibits open at the start until i click it. That's in 3 different browsers. Anyone has an idea?

the site is: luebbertmatuszewski.de
my theme: "roff"

thank you for all!

Probably because you have two lines in one...they need to be two separate lines...the third line in your script...this should be a separate line:


$("#menu ul li.section-title").nextAll().hide();


Also, your #menu div isn't right...it's not possible to even see the link to Indexhibit on my laptop...

that was it. too stupid to copy and paste...
I moved the Indexhibit link higher.

Thank you so much, great Vaska