Javascript Help v2.0

Back again, another tumblr script problem.

So, I have this code for a sidebar dropdown menu, when you click the image it's meant to drop down the links/pages.

HTML part

Code:

<!-- drop down box -->
<div id="header" class="header-relative">
	<div style="padding:20px 0px;">
		{block:IfHeaderImageImage}
			<img id="imagetitle" src="{image:header image}">
		{/block:IfHeaderImageImage}
			
		{block:IfNotHeaderImageImage}
			<h1>{Title}</h1>
		{/block:IfNotHeaderImageImage}
		
	    {block:IfNotLinkOnSidebar}
	    <ul id="linkHeader">
	        <li><a href="/">Home</a></li>
	        <li><a href="http://snowfoxtheme.tumblr.com">Theme</a></li>
	        {block:AskEnabled}
				<li><a href="/ask" >{AskLabel}</a></li>
			{/block:AskEnabled}
			{block:IfLink1title}
				<li><a href="{text:Link 1 url}">{text:Link 1 title}</a></li>
			{/block:IfLink1title}
			{block:IfLink2title}
				<li><a href="{text:Link 2 url}">{text:Link 2 title}</a></li>
			{/block:IfLink2title}
			{block:IfLink3title}
				<li><a href="{text:Link 3 url}">{text:Link 3 title}</a></li>
			{/block:IfLink3title}
			{block:IfLink4title}
				<li><a href="{text:Link 4 url}">{text:Link 4 title}</a></li>
			{/block:IfLink4title}
			{block:IfLink5title}
				<li><a href="{text:Link 5 url}">{text:Link 5 title}</a></li>
			{/block:IfLink5title}
			{block:HasPages} 
           <li><a id="pageLink" href="javascript:void(0)">{text:Page Text}</a></li>
        	{/block:HasPages}
	    </ul>
	    <ul id="titlePages" class="titleLinks">
        	{block:HasPages} 
    			{block:Pages} 
					<li><a href="{URL}" >{Label}</a></li>
				{/block:Pages}
			{/block:HasPages}
   	 </ul>
	    {/block:IfNotLinkOnSidebar}
	    <div id="headerOpacity"></div>
	</div>
    <!-- end of drop down box-->

Description box

Code:

<div class="links_list"> 
<img src="IMAGE URL"> 
<div class="links_body"> 
<center> 
<p><a href="LINK URL">LINK TITLE</a></p>
<p><a href="LINK URL">LINK TITLE</a></p>
<p><a href="LINK URL">LINK TITLE</a></p>
<p><a href="LINK URL">LINK TITLE</a></p>
</center> 
</div></div>

Problem is, it's not displaying it as a clickable image which drops the links down, it's just displaying the image with links underneath before clicking.


Help? Cheers!

 

To the top. Still need help.

 

Bump.

 

Do you have live example of:

1. What it's supposed to do
2. Your attempt

If you do, PM me the link(s) and I'll take a look.

 

What it's supposed to do is appear as an image on my sidebar.
When clicked, links should drop down to go to my links (ask box etc)
Currently the image and links are showing before I click the image.

I'd prefer not to share the link if possible, personal blog.

 

I asked for a link because I'd like to examine the CSS or any JavaScript/jQuery on the page since it looks like it could be a selector issue.


I can see you copied the header from http://snowfoxtheme.tumblr.com
But no where on that page can I see dropdown links.
On this one http://snowfoxtheme-2.tumblr.com/ the pages link has jQuery attached to it.


So you must have gone to another site and copied something. Perhaps from here: http://academyoftumblr.tumblr.com/post/7118225682/sliding-drop-down-menu ?

If so, you need to copy this into your theme template

Code:

<script type="text/javascript"> 
$(document).ready(function(){ 
$(".links_body").hide(); 
$(".links_head").click(function(){ 
$(this).next(".links_body").slideToggle('fast'); 
}); }); </script> 
<style type="text/css"> 
.links_list { margin:0px; padding:0px; width:180px;} 
.links_head { padding-top:5px; padding-bottom:5px; cursor:pointer; position:relative; margin:1px; text-align:center;} 
.links_body { padding:10px; text-align:left; color: #fff; display:none;} 
</style>

Probably just under this code

Code:

<script type="text/javascript" src="http://static.tumblr.com/dbek3sy/8Aqmgryi7/jquery_18.js"></script>

If you copied this

Code:

<script type="text/javascript" src="http://static.tumblr.com/3ikgvxs/0TGl4zgpu/jquery.min.js"></script> 

you are loading 2 jquery libraries into the same page which will cause conflicts (And all JS will break) and it will need to be removed.

 

I've taken the above HTML out of the theme, so it's just a customised theme now. I just want a clickable image to then display the sidebar links. Could you help code this please?

 

Yes, I can code it.
But I need to know what I'm working on. I implore you to PM me a link to your site so I can inspect the source myself. I need to know what libraries you are loading and the over all structure of the page.

I can get it done faster this way, or as an alternative you could send me the tumblr theme source code so I can modify that.

 

Thanks for your help, working perfectly. Can be closed.