Link to home
Start Free TrialLog in
Avatar of samiam41
samiam41Flag for United States of America

asked on

Create CSS dropdown text box

Hi Experts.  I was trying this on my own but can't seem to get the proper commands in the right order.  Any help would be appreciated.  I am trying to create a drop-down text box that contains one sentence and then several bulllets under it.  I am including the script that works but I can't figure out how to change the font family or size.

Thanks.
<a href="#" onclick="document.getElementById('moreInfoDiv').style.display=document.getElementById('moreInfoDiv').style.display=='block'?'none':'block';
return false">Click For A Detailed Dropdown</a>
<div id="moreInfoDiv" style="display: none; background-color:#fff; border:groove 2px #000";>
*Computer & Network Security<br />
*Server Installation & Support<br />
*Anti-virus & Spyware Protection/Removal<br />
*Technicial Consulting<br />
*Data Backup & Recovery<br />
*On-site or Remote Trouble-shooting & Repair<br />
*Network Management<br />
*Website Design & Hosting<br />
*On-site or Remote Data Backup<br />
</div>

Open in new window

Avatar of aibusinesssolutions
aibusinesssolutions
Flag of United States of America image

Do you have a CSS file for this?  You can set the properties you want in the CSS for the moreInfoDiv.

If not you can do this:
<div id="moreInfoDiv" style="display: none; background-color:#fff; border:groove 2px #000; font-family: Arial; font-size: 12px;">
Avatar of samiam41

ASKER

Thanks for the quick reply.  That was the problem.  I was trying to create my own CSS file after working with you and a couple of other experts.  I just couldn't get it started.  

So I would change the div id line in my script to the one you mentioned?
Would I use <li> for the bullets?
ASKER CERTIFIED SOLUTION
Avatar of aibusinesssolutions
aibusinesssolutions
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Hmm...  You may have lost me on the CSS file part.  I am only using one file, I don't have a seperate CSS file.  Here is what I have, let me know where I am making it more difficult please.
<html>
<head>
<style type="text/css">
#moreinfodiv
{
display: none; 
  background-color:#fff; 
  border:groove 2px #000;
  font-family:Arial;
  font-size:12px;
}
</style>
</head>
<body>
 
<a href="#" onclick="document.getElementById('moreInfoDiv').style.display=document.getElementById('moreInfoDiv').style.display=='block'?'none':'block';
return false">Click For A Detailed Dropdown</a>
<div id="moreInfoDiv>
<li>Computer & Network Security<br />
<li>Server Installation & Support<br />
<li>Anti-virus & Spyware Protection/Removal<br />
<li>Technicial Consulting<br />
<li>Data Backup & Recovery<br />
<li>On-site or Remote Trouble-shooting & Repair<br />
<li>Network Management<br />
<li>Website Design & Hosting<br />
<li>On-site or Remote Data Backup<br />
</div>

Open in new window

Thanks for your patience....  
WAHOOO!!!!  I found my error.  SOB!

Here ---->  <div id="moreInfoDiv">  

I had it set as "moreinfo> without the second ".  Ugh!
I plan to wrap this up and award you points, but if I can ask one last question to completely understand why you did what you did....

When you mentioned ->  "...use # since moreinfoDiv is the target ID", the moreinfodiv is referring to the text being listed.  How would you go about changing to the font settings to something else for the link "Click for a more...."?
Set the class of your a tag to something, and then set it up in the CSS file.

<a href="#" class="alink" onclick......

.alink
{
   font-size: 14px;
}
Oh............  Wow.  Man that makes much better sense.  I can't thank you enough for explaning it.
Great work.  I appreciate your patience and offering up some knowledge on how CSS works.  I'm really starting to understand it better, thanks to experts like you.

Regards,
Aaron Shaw
No problem.

Just for future reference, you can create a seperate file named something like styles.css and put everything between your <style></style> tags in there.  Then on your page you would do this.

<link href="styles.css" rel="stylesheet" type="text/css" />
So that would keep the style info clean and organized in a seperate file.....  Genius!

That is a good tip and one that I will have to begin incorporating into my websites as I progress.