Jump to content

Hidden list


Walliver
 Share

Recommended Posts

I have an online CV and I want to link to around 50 web pages on one topic. Obviously if they're all listed out it'll take up quite a bit of the page and look a bit silly.

 

I'd like something a bit similar to the fast reply button where the box appears and hides when you click on it. I know very little about how I would go about his, what's the best way to do it?

 

Thanks in advance.

x

Link to comment
Share on other sites

Its late so I dont have time to create the code tonight (I will tomorrow if you need it) but the basic idea is to create a hidden div which then on clicking the button appears (using Javascript). Its fairly straight forward to do, the CSS for the hidden div would be as normal but include a line of:

 

display: none;

 

Then the Javascript basically changes the display to

 

display: block;

Link to comment
Share on other sites

I know next to nothing about Javascript. If you can talk me through it as you would a complete idiot that would be fantastic.

 

Apologies, Ive not been on much since then, your Javascript (which you can stick in the HEAD of your document should be:

 

<script language="javascript">
	function toggle_div(item)
	{		if (!item)		{ return; }
			if (document.getElementById(item).style.display == "block") {
					document.getElementById(item).style.display = "none";
					return;
			}
			document.getElementById(item).style.display = "block";
	}
</script>

 

Then within your document you would have your link or button to show the div, the link should be:

 

<a href="java script:toggle_div('hiddendiv');">Whatever you want for the link</a>

 

somewhere in your doc you would have the div with all the links, such as:

<div id = "hiddendiv">
<ul>
<li><a href=......etc></li>
<li>etc </li>
</ul>
</div>

 

 

and of course your CSS would style the div as normal but include the

display: none;

 

So the important bit is to have a javascript function called toggle_div then just pass the Javascript the name of the div you want to show/hide. So if you want two or three hidden divs you just call the relevant one within the link.

 

To close the div just call the function again, maybe from a Close link on the div.

Link to comment
Share on other sites

Hello!

 

Sorry for being terribley rude. I meant to thank you for trying to help but it didn't work I'm afraid. The 'site' I'm working on is a blogger one (I'm not cool enough to actually have a blog, I just use it to display my CV and as a hub page to link to my portfolio) and because of this I can't put anything in the <head> section, apparently. B)

Link to comment
Share on other sites

Hello!

 

Sorry for being terribley rude. I meant to thank you for trying to help but it didn't work I'm afraid. The 'site' I'm working on is a blogger one (I'm not cool enough to actually have a blog, I just use it to display my CV and as a hub page to link to my portfolio) and because of this I can't put anything in the <head> section, apparently. B)

 

Thats no bother mate I was just taking the pee B)

 

The script can actually go in the body its just usual to put it in the <HEAD>.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.