[jQuery] Adding an onClick funtion to existing working menu - need 2 or 3 things to unload/load

[jQuery] Adding an onClick funtion to existing working menu - need 2 or 3 things to unload/load


Hi All... Really sorry to be going over this again. It's been one
solid week all day and night. I know more, though not enough yet. Hope
this is easy to understand. I REALLY need help. I've tried 100's of
things all thru new years eve and day as well. hehehe
WORKING menu must stay working though I seem to be able to add
anything to each <li> and it still works. SO what code should I add to
get a bunch of hidden divs to TOTALLY load and unload IN the same
spot? I won't post a bunch of JQuery script code. I've tried about
100 things or so... And studied for days.
There's 3 menu sections. Here's the first one:
-------------
<li>
<a href="#first" class="first">ITEM Menu section A</a>
<ul class="first">
<li><a href="#first-a" ADD unique class, name, rel??">MENU Section A
first-a</a></li>
<li><a href="#first-b">MENU Section A first-b</a></li>
<li><a href="#first-c">ITEM first-c</a>MENU Section A first-c</li>
<li><a href="#first-d">ITEM first-d</a>MENU Section A first-d</li>
<li><a href="#first-e">ITEM first-e</a>MENU Section A first-e</li>
</ul>
--------------
They are the only things I want to be clickable.
So when a click occurs on any one of them i need a div (i think?) that
is currently hidden to load into another area on the page. I only use
one html page and one css file for the whole thing.
SO: Then when another menu item (as above) is clicked I need the
older div to TOTALLY unload and the new one to load in the same
location replacing the old one of course. You see, the divs contain
working videos so they need to completely unload then load I believe.
At this point the empty divs look like this, (below is code) and when
they are unhidden they all show up and will play.
Would it be better to put them in something other than <li rel=> ??
(see below please)
The video playing script works well. Though it seems to only work with
inline (html code) by using rel= It's probably my unskilled-ness as
there's likely other html that would stilll have them work.
This is the html that works with the working video play code. The
videos do play without the <div> stuff. I can't figure out what would
be better than what's above in the menu.
Is <li rel= a good choice?
--------------
<div class="video" id="vid1">
<li rel="mediaplayer.swf:vid1.flv" name="vid1"</rel>
</div>
<div class="video" id="vid2">
<li rel="mediaplayer.swf:vid2.flv" name="vid2"</rel>
</div>
<div class="video" id="vid3">
<li rel="mediaplayer.swf:vid3.flv" name="vid3"</rel>
</div>
<div class="video" id="vid4">
<li rel="mediaplayer.swf:vid4.flv" name="vid4"</rel>
</div>
---------------
I'm really relentless on this though very in the mud stuck.
So: I really need to deduce:
1) What's best to add to the menu (class? name? id? rel? ) ... so that
I can still have it work as it does and yet add the ability to load
and unload completely the divs which will need to be hidden I guess?
It would actually be cool to be able to add a slideshow later, so
being able to add more triggers later to the menu above would be
great.
2) What would be some cool JQuery I could use that would get whatever
I add to the menu ('see 1' right above this) that could load and
unload the divs individually. ONE unique div (video) for each menu
item.
3) I'd love to add a slideshow for each menu item in the future so
being able to load and unload a third seperate set of divs into a
third location would be great.
Well, I can dream...!!!
HUGE request here.
thank you very much for thinking about my post.