samiam41
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.
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>
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?
So I would change the div id line in my script to the one you mentioned?
ASKER
Would I use <li> for the bullets?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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>
ASKER
Thanks for your patience....
ASKER
WAHOOO!!!! I found my error. SOB!
Here ----> <div id="moreInfoDiv">
I had it set as "moreinfo> without the second ". Ugh!
Here ----> <div id="moreInfoDiv">
I had it set as "moreinfo> without the second ". Ugh!
ASKER
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...."?
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;
}
<a href="#" class="alink" onclick......
.alink
{
font-size: 14px;
}
ASKER
Oh............ Wow. Man that makes much better sense. I can't thank you enough for explaning it.
ASKER
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
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" />
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" />
ASKER
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.
That is a good tip and one that I will have to begin incorporating into my websites as I progress.
ASKER
hey man, if you have some time, check this out please.
https://www.experts-exchange.com/questions/24382059/CSS-set-to-close-previous-link-when-new-one-is-open.html
https://www.experts-exchange.com/questions/24382059/CSS-set-to-close-previous-link-when-new-one-is-open.html
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;">