Sliding menu

Ty44ler · 12-12-2011, 06:54 PM

I'm trying to make this menu go up and down when the arrows are clicked. Right now, it shows all of them and I can't figure out how to make it so that it only shows the first 9 and will show the rest in the menu when it's clicked.

I really don't know where to start. I found some scripts but they turned out really funky. Even if it's something super simple is cool, just where to begin??

Here is the menu:

Code:

<div class="arrow_holder"><span onclick="document.getElementById('down').display = 'none'; document.getElementById('up').display = 'block';" ><img src="images/arrow-up.png" alt="" border="0" /></span></div>
      
//video1	
<div class="portfolio_details" onclick="change_video(1);">
                <div class="work_thumb"><img src="images/12.jpg" alt="" border="0" /></div>
                <div class="work_name"><a href="#"><strong>12 FL OZ</strong><br />Narrative / Television</a></div>
            </div>
//video2           
 <div class="portfolio_details" onclick="change_video(2);">
                <div class="work_thumb"><img src="images/catch.jpg" alt="" border="0" /></div>
                <div class="work_name"><a href="#"><strong>THE CATCH: COSTA RICA</strong><br />Narrative / Television</a></div>
            </div>

//video3
       <div class="portfolio_details" onclick="change_video(3);">
                <div class="work_thumb"><img src="images/cole.jpg" alt="" border="0" /></div>
     <div class="work_name"><a href="#"><strong>COLE PETTICOAT P.I.</strong><br />Narrative / Television</a></div>
            </div>
           
//video4
 <div class="portfolio_details" onclick="change_video(4);">
                <div class="work_thumb"><img src="images/mayan_thumb.jpg" alt="" border="0" /></div>          
 <div class="work_name"><a href="#"><strong>MAYAN BLUE</strong><br />Documentary</a></div>
            </div>
           
//video5
<div class="portfolio_details" onclick="change_video(5);">
                <div class="work_thumb"><img src="images/marine.jpg" alt="" border="0" /></div>
<div class="work_name"><a href="#"><strong>MARINE INVESTIGATORS</strong><br />Documentary</a></div>
            </div>

//video6
<div class="portfolio_details" onclick="change_video(6);">
                <div class="work_thumb"><img src="images/police.jpg" alt="" border="0" /></div>             
<div class="work_name"><a href="#"><strong>DISH POLICE</strong><br />Commercial</a></div>
            </div>

//video7
<div class="portfolio_details" onclick="change_video(7);">
                <div class="work_thumb"><img src="images/septic.jpg" alt="" border="0" /></div>
<div class="work_name"><a href="#"><strong>SUPER SEPTIC MIKE ROBE</strong><br />Commercial</a></div>
            </div>

//video8
<div class="portfolio_details" onclick="change_video(8);">
                <div class="work_thumb"><img src="images/adultswim.jpg" alt="" border="0" /></div>
                <div class="work_name"><a href="#"><strong>ADULT SWIM - HAIKU</strong><br />Commercial</a></div>
            </div>
	
//video9
<div class="portfolio_details" onclick="change_video(9);">
                <div class="work_thumb"><img src="images/miller.jpg" alt="" border="0" /></div>
                <div class="work_name"><a href="#"><strong>MILLER LITE / FALCONS</strong><br />Commercial</a></div>
            </div>		

//video10
<div class="portfolio_details" onclick="change_video(10);">
                <div class="work_thumb"><img src="images/trulite.jpg" alt="" border="0" /></div>
                <div class="work_name"><a href="#"><strong>TRUCLEAR HD PLUS</strong><br />Commercial</a></div>
            </div>

//video11
<div class="portfolio_details" onclick="change_video(11);">
                <div class="work_thumb"><img src="images/tara.jpg" alt="" border="0" /></div>
                <div class="work_name"><a href="#"><strong>TARA JEWELRY</strong><br />Commercial</a></div>
            </div>

//video12
<div class="portfolio_details" onclick="change_video(12);">
                <div class="work_thumb"><img src="images/boomerang.jpg" alt="" border="0" /></div>
                <div class="work_name"><a href="#"><strong>BOOMERANG VAMPIRES</strong><br />Commercial</a></div>
            </div>

video13
<div class="portfolio_details" onclick="change_video(13);">
                <div class="work_thumb"><img src="images/gapower.jpg" alt="" border="0" /></div>
                <div class="work_name"><a href="#"><strong>GA POWER FALCONS</strong><br />Commercial</a></div>
			</div>

		<div class="arrow_holder"><span onclick="document.getElementById('up').display = 'none'; document.getElementById('down').display = 'block';" ><img src="images/arrow-down.png" alt="" border="0" /></span></div>
		</div>

embeebutterly · 12-12-2011, 07:15 PM

can i see this in action, do you have a link?

Ty44ler · 12-12-2011, 09:40 PM

There really is no action yet. I keep trying things, but keep deleting it to start from a clean slate.

Here's the page though: http://www.tylereadams.com/standoff/Work.php