Indexhibit Support

Hi guys,

I'm looking to use the expanding menu code (from Ross Cairns) for some other page elements. In particular, I have some text I'd like to appear in the main content area, consisting of a title and a description. I'd like it so that when you click on the title, the description slides open below it. Similar to the code used in a menu.

I am hoping someone can guide me on how the javascript should be edited. I have tried lots of variations, but can't make it work.

The current piece of code which references the menu id is:

var item_title = $("#menu ul").eq(num).children(":first");
var items = $("#menu ul").eq(num).children().filter(function (index) { return index > 0; });

I'd like to add a second menu that I want to appear in the content area. I thought I'd be able to add the id (#content ul) to the above code as follows:

var item_title = $("#menu ul, #content ul").eq(num).children(":first");
var items = $("#menu ul, #content ul").eq(num).children().filter(function (index) { return index > 0; });

Obviously this isn't correct. I'm not a programmer, so I'm just guessing things trial and error style.

If anyone can shed light on the right way to do it I'd appreciate it.

Thanks,
G

This is much more simple than this...Jquery is your friend...you could do something like this...

1. When you click on <a href='#' onclick="$('#showit').toggle();">me</a> I show more info.

And then, add your text with a container - the . represent a blank space, you need it:

1. <div id='showit'>
2. .
3. It's magic!
4. .
5. </div>

Done. Try it...cut and paste...

;)

Wow, this is nearly the solution. I just tried it, however when it loads, the contents of #showit are visible. I want them hidden until the user clicks on the title.

Also... this doesn't slide the #showit div into place. It just shows/hides instantly. I'd like it consistent with the way the expanding menu slides.

Woops...

1. <div id='showit' style='display: none;'>

That's all I'm doing. Research Jquery and 'toggle' and from there you will find a world of other things you are looking for.

;)

Thanks so much Vaska. That's done what I wanted. I also just found that changing toggle to slideToggle, makes it animate smoothly.

It does need me to use more code than I had hoped in the actual text area of the admin module though. It just increases risk of my client accidentally breaking it.

Is there any way to hide the a href='#' onclick="$('#showit').toggle();" somewhere else?

Yes, if you learn how to use Jquery you can do that.

Ok thanks I'll look into it. It's very challenging learning these things but also rewarding. I'm just a little grasshopper.

Ok so I think I worked it out. I put this in the head of the index page:

$(document).ready(function(){

    $('#title').click(function () {
    $('#show').slideToggle();

});
});

This way the only thing that needs to be entered into the admin text module is. A little bit neater, and works like a treat.

Now if only I can work out how to make the cursor change to a hand when you hover over the #title.

Very nice work - see, not so hard when you dig in.

Just add a style to #title...something like...

1. #title { cursor: pointer; }

1. Hello everyone
2. Can anyone help me...i have one issue, I made my expanding menu on the description area writing by the way Vaska make the cut and paste code
3. 1.</font><a href='#' onclick="$('#showit').toggle();">+ info</a>

the thing is that i´m using the iwakami 3 plugin and I changed the text below the images....everything was ok but I noticed that when i click the images from the last one to the first one strange things happen like the images dissapearing or duplicating the images.

Can anybody please take a look.

my website link

thankss in advance

sorry... mi website well written