We help IT Professionals succeed at work.

Create CSS dropdown text box

samiam41
samiam41 asked
on
Medium Priority
915 Views
Last Modified: 2012-05-06
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

Comment
Watch Question

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;">

Author

Commented:
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?

Author

Commented:
Would I use <li> for the bullets?
Yes.

<div id="moreInfoDiv">
<li>Bullet 1</li>
<li>Bullet 2</li>
</div>

Then in your CSS file, use # since moreinfoDiv is the target ID.

#moreInfoDiv
{
  display: none;
  background-color:#fff;
  border:groove 2px #000;
  font-family:Arial;
  font-size:12px;
}

Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts

Author

Commented:
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

Author

Commented:
Thanks for your patience....  

Author

Commented:
WAHOOO!!!!  I found my error.  SOB!

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

I had it set as "moreinfo> without the second ".  Ugh!

Author

Commented:
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;
}

Author

Commented:
Oh............  Wow.  Man that makes much better sense.  I can't thank you enough for explaning it.

Author

Commented:
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" />

Author

Commented:
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.

Author

Commented:
Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.