Toggle visibility of DIV based on Dropdown
- by user1869787
I have never used Javascript before, only HTML and CSS. I am attempting to have my information show only when selected from my drop down. I don't know any Javascript so any help would be overly appreciated.
This is my html so far:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>Gone Fishin'</title>
<link href="finale.css" rel="stylesheet" type="text/css">
</head>
<div id="wrapper">
<div id="nav">
<ul>
<li><a href="Index.html">About Us</a></li>
<li><a href="Species.html">List by Species</a></li>
<li><a href="County.html">List by County</a></li>
<li><a href="apply.html">Reservations</a></li>
</ul>
</div>
<body>
<div id="content">
<p>ontent</p>
<fieldset>
<legend>Choose your Target</legend>
<select name="option" id="options">
<option value=""></option>
<option value="1">American Shad</option>
<option value="2">Black Crappie</option>
<option value="3">Bluegill</option>
<option value="4">Brook Trout</option>
<option value="5">Brown Trout</option>
<option value="6">Carp</option>
<option value="7">Chain Pickerel</option>
<option value="8">Channel Catfish</option>
<option value="9">Flathead Catfish</option>
<option value="10">Largemouth Bass</option>
<option value="11">Muskellunge</option>
<option value="12">Norhtern Pike</option>
<option value="13">Pumkpinseed</option>
<option value="14">Rainbow Trout</option>
<option value="15">Readbreast Sunfish</option>
<option value="16">Rock Bass</option>
<option value="17">Sauger</option>
<option value="18">Saugeye</option>
<option value="19">Smallmouth Bass</option>
<option value="20">Steelhead</option>
<option value="21">Striped Bass</option>
<option value="22">Walleye</option>
<option value="23">White Bass</option>
<option value="24">White Crappie</option>
<option value="25">White Perch</option>
<option value="26">Yellow Perch</option>
</select>
<div id="option">
<div id="1" style="display: block">Test 1</div>
<div id="2">Test 2</div>
<div id="3">Test 3</div>
<div id="4">Test 4</div>
<div id="5">Test 5</div>
</div>
</fieldset>
</div>
</body>
</div>
</html>
And this is my CSS:
@charset "utf-8";
/* CSS Document */
/*General Styles*/
* {font-family:Verdana, Geneva, sans-serif;}
#wrapper {width:85%;
margin:auto;
background-color:#00CC00;}
/*End of General Styles*/
/* nav div styles */
#nav {background-color:#FF0000;
text-align:center;}
#nav ul li {display:inline-block;
background-color: #67e667;
border:5px dashed;
width: 90px
text-align:center;}
#nav ul li a:link {background-color:#a60000;
width: 90px;}
#nav ul li a:visited {background-color: #009999;}
#nav ul li a:hover {background-color: #a64b00;}
/* end nav styles */
/* content div styles*/
#content {padding: 5px;}
#option {display:none;}
/*end content styles*/
/*start form styles*/
fieldset {background-color:#ff7400;
color:white}
label {display:inline-block;
width: 150px;
float:left;
margin-right: 3px;}
#form li{margin-bottom:10px;}
#dtg li{margin-bottom:5px;}
Thank you for any help received
