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

hello ross,

although i am a complete beginner to everything about the web i just successfully made an expandable menu on my site studiodosis.com thanks to your wonderful step by step tutorial and download! thank you so much for it!

uuuummm... :) now i have another question (to ross or anybody out there who might have a clue...)

when I click on an exhibition title under a section, all other already expanded sections roll up and disappear. is there a way to make the sections expand or contract only when i click on the section title its self? versus when an exhibition under a section has been clicked on?...

i would appreciate greatly any pointer from anyone out there.

big thank you in advance
aylin

Vaska,

You posted this:

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

I've been tinkering around with the JS for a bit, can't seem to get it working.. Looks like it's as simple as replacing some lines of code in the JS though. Can you post a step by step on how to get this running?

Thanks in advance!
Jostin

I am curious if there is a way for the menus to remember which state they are in after a link is clicked. Say i have 3 menus that I have expanded and I click a link within one of them, I've been trying to get the script to keep the 3 menus open after the user has clicked and "activated" one of the sections.

Of course what happens is that the other two collapse and the one clicked remains, but it feels a bit hiccupy, it'd be great for the expanded menus to remain expanded and the contracted menus to remain contracted.

Any thoughts?

Thanks!

trying to get this to work, I copied thenine's js and mitch's styles as a start, the index.php as well, but the menus do not close... I believe I had all proper files in place, but am I missing something? please help anyone, greatly appreciated.

http://www.wider-than-pictures.com/ndxz_test2/

thanks

I went to find this file and it's not there...

/ndxz_test2/ndxz-studio/site/js/collapsable.menu.thenine.js

my mistake -- thank you -- so obvious I somehow forgot to upload that one file. .. . works like a charm now...thank you! viva indexhibit.

I followed rcains tutorial but it doesnt seem to be working for me. Can someone look at the code and tell me what im missing? the site is: http://shapescolorssounds.com/

Thanks!

Brad,

You have one too many "});" in your script on your page. Delete one set before the "< /script >" and it should work fine (it did for me).

Thanks! That worked.

Has anyone found a solution to keep all the menus open until they are clicked? As a few people have mentioned in this thread the accordion effect works, but the menus close when you click on an exhibit.

see mine: work.thompsonryan.com

...

With the rcairns solution, is it possible to collapse all the exhibit when you click on one?
In place to collapse all the exhibit except these from the list you clik on.

An option in the .js file?

1. I am having some trouble with this. It is working somewhat, but one of the sections is open no matter what. I've changed every single number around and no matter what i do this section is ALWAYS open on a refresh. 
2. $(document).ready(function()
3. {
4. ¬†¬†¬†¬†setTimeout('move_up()', 5);
5. ¬†¬†¬†¬†expandingMenu(2); 
6. ¬†¬†¬†¬†expandingMenu(3); 
7.     expandingMenu(4);
8.     expandingMenu(0);
9.     expandingMenu(1);

});

is there something wrong with this?

the site i am working on.

Any ideas?

I goofed up the post a bit. here is a corrected version:

I am having some trouble with this. It is working somewhat, but one of the sections is open no matter what. I've changed every single number around and no matter what i do this section is ALWAYS open on a refresh.

1. $(document).ready(function()
2. {
3.         setTimeout('move_up()', 5);
4.         expandingMenu(2); 
5.         expandingMenu(3); 
6.         expandingMenu(4);
7.         expandingMenu(0);
8.         expandingMenu(1);
9. });

is there something wrong with this?

This is the site i am working on

Any ideas?

1. Try with:
2. setTimeout('move_up()', 1);

Tried, the Info tab now is open on a refresh. :(

Try to creat a new Info section.

I've tried to create a new info section. I've tried to create a section that is hidden and set to every different position possible. It's driving me crazy and I'd really really like to have this feature.

Could it be something wrong with the way my install is setup? My about me page displays as the first thing and i can't figure out how to prevent that either.

Give the address of your .js file, verify the number of your section in your admin panel and write a clean thing in this part:

$(document).ready(function()
{
    setTimeout('move_up()', 1);
    expandingMenu(0);
    expandingMenu(1);
    expandingMenu(2);
    expandingMenu(3);
});

Put that in and verified the correct numbers with the settings in the admin. Info can be closed but its open on a refresh.

Javascript

Thanks for your help, this is driving me crazy.

Somehow by making the about me page hidden it now works. Thanks for all of your help. PHP is crazy!

I would also be interested in a solution, where all expanded menus stay open after a link was clicked. It would just have a more application like feel with this I think.
Will have a look at this on the weekend.

I seem to have the excact problem as markforsman above. My first menu (number 4 in the admin) also seems to appear all the time, even though it should not. When I swap the projects around the "new" number 4 is appearing all the time...

I also need to thank all of you - not least rcains and the step by step!

If any one feels like it, please take a look a my site www.sigvaldi.dk and if you could figure out why it wont hide, I would appreciate it!

...and any ideas of why the menu reveals itself so slow are more than welcome as well, thankyou!

Found out. I had to put in a number "4" instead of "1":

setTimeout('move_up()', 4);
    expandingMenu(1);
    expandingMenu(2);
    expandingMenu(3);
    expandingMenu(4);
    expandingMenu(5);
    expandingMenu(6);
    expandingMenu(7);
    expandingMenu(8);        

And to answer my own question above, about speed: strangely enough, it seems, the lower the number is "(speed=xxx" (mine is around 130)) the faster it goes...

The speed part is actually "how many milliseconds should the animation take". the lower, the faster, obviously.

Hi,

my menu expands nice and smooth, but I would like to achieve, that the distance inbetween menu block and content block also expands and collapses at the same time. In the css I tired to change content height and menu height etc, but that didn‘t work. now I am a bit stuck… this is the page:

Webpage

anybody got an idea?
thanks so much!