Toggle visibility of DIV based on Dropdown

Posted by user1869787 on Stack Overflow See other posts from Stack Overflow or by user1869787
Published on 2012-12-02T04:45:21Z Indexed on 2012/12/02 5:03 UTC
Read the original article Hit count: 341

Filed under:
|

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

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about html5