onClick show div + open URL in new tab?

[flygoldfish]

Sorry for the newbie question.

This is a follow up plea for help from an archived post which I found massively helpful (thanks to Fotiman for the original post[webmasterworld.com ]

I have successfully created a link which reveals hidden text and opens a link at the same time (for the purposes of a link which says 'Click here to reveal discount code and open link in new window') using the following:

<A href="javascript:void(0)"
onclick="window.open('http://google.com'); document.getElementById('div_name2').style.display='';return false;">
Sign up</A>

<div id="div_name2" style="display:none;margin:15px 15px 0px 15px;padding:5px;border:1px solid #aaa;">
Aweber optin form here.

</div>

My question is:

How can I have more than one of these on one page? As it stands, once you have opened one, the others don't do anything.

[Fotiman]

Welcome to WebmasterWorld! Looking back at that original post, my suggestion would be for you to try something like this:

<a href="http://google.com" 
onclick="window.open(this.href); document.getElementById('div_name2').style.display='';return false;"> 
Sign up</A> 
<a href="http://bing.com" 
onclick="window.open(this.href); document.getElementById('div_name2').style.display='';return false;"> 
Sign up</A> 
<a href="http://yahoo.com" 
onclick="window.open(this.href); document.getElementById('div_name2').style.display='';return false;"> 
Sign up</A> 
<div id="div_name2" style="display:none;margin:15px 15px 0px 15px;padding:5px;border:1px solid #aaa;"> 
Aweber optin form here. 

</div>

That works for me.

[flygoldfish]

Thanks for your reply, much appreciated.

Sorry, I should have explained - I was hoping to have it so that there are three separate bits of hidden code which either open with each link clicked or all open when one link is clicked (either option would do the trick). As it is, that option gives three links which open one bit of hidden text.

I attempted to copy this section

<div id="div_name2" style="display:none;margin:15px 15px 0px 15px;padding:5px;border:1px solid #aaa;">
Aweber optin form here.

below each of these lines

Sign up</A>

but that didn't work. I'm a complete novice, so it was just a wild stab in the dark really!

[Fotiman]

The problem is that the id attribute must be unique. So if you copied that div element, you'd have 3 div's all with the id "div_name2".

You could modify the above example to use unique IDs:

<a href="http://google.com" 
onclick="window.open(this.href); document.getElementById('div_name2').style.display='';return false;"> 
Sign up</A> 
<a href="http://bing.com" 
onclick="window.open(this.href); document.getElementById('div_name3').style.display='';return false;"> 
Sign up</A> 
<a href="http://yahoo.com" 
onclick="window.open(this.href); document.getElementById('div_name4').style.display='';return false;"> 
Sign up</A> 
<div id="div_name2" style="display:none;margin:15px 15px 0px 15px;padding:5px;border:1px solid #aaa;"> 
Google was clicked
</div>
<div id="div_name3" style="display:none;margin:15px 15px 0px 15px;padding:5px;border:1px solid #aaa;"> 
Bing was clicked 
</div>
<div id="div_name4" style="display:none;margin:15px 15px 0px 15px;padding:5px;border:1px solid #aaa;"> 
Yahoo was clicked
</div>

[flygoldfish]

Fantastic, that worked a treat! Thanks so much for your help :)