I am struggling to hide the divs with the radio buttons until their title is clicked on. However, I am facing issues as they are not showing up when their title is clicked on. Any assistance would be greatly appreciated.
SPIKE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8>
<meta name="generator" content="CoffeeCup Web Editor (www.coffeecup.com)">
<meta name="description" content="">
<meta name="keywords" content="">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="mebbe2.css" rel="stylesheet"/>
<style>
body {
background-color: #7094B8;
}
.container {
position: relative;
left: 24%;
}
h1 {
align-text: center;
}
#butt {
display: block;
background-color: #e5eecc;
height: 230px;
width: 500px;
padding: 3px;
border: solid 2px #c3c3c3;
}
p {
font-weight: bold;
font-size: 22px;
}
</style>
</head>
<body>
<div class="container">
<div id="select">
<h1>Select Your Preferred Search</h1>
<p>Click on your choice of search method.</p>
<button id="communities">Communities Served</button>
<br>
<button id="specialties">Therapeutic Specialties</button>
<br>
<button id="insurance">Insurance Accepted</button>
<script type="text/javascript">
$(document).ready(function () {
$(".special,.commune,.insure").hide();
});
</script>
<script>
$(document).ready(function () {
$("#communities").click(function () {
$(".select, .special, .insure").hide();
});
$("#show").click(function () {
$(".commune").show();
});
});
$(document).ready(function () {
$("#specialties").click(function () {
$(".select,.insure,.commune").hide();
});
$("#show").click(function () {
$(".special").show();
});
});
$(document).ready(function () {
$("#insurance").click(function () {
$(".select,.special,.commune").hide();
});
$("#show").click(function () {
$(".insure").show();
});
}); </script>
</div>
<div class="commune" id="butt"><h3>Choose Your Community</h3>
<form action="input">
<input type="radio" name="common" value="caucasion">Caucasion<br>
<input type="radio" name="common" value="hispanic">Hispanic<br>
<input type="radio" name="common" value="carribean">Carribean<br>
<input type="radio" name="common" value="africanAmerican">African-American<br>
<input type="radio" name="common" value="male">Male<br>
<input type="radio" name="common" value="female">Female<br>
<input type="radio" name="common" value="professional">Professional<br>
<input type="radio" name="common" value="lGBT">LGBT<br>
<input type="radio" name="common" value="youth">Youth
</form>
</div>
<div class="special" id="butt">
<h3>Choose Your Specialty</h3>
<form action="input">
<input type="radio" name="spec" value="groups">Groups<br>
<input type="radio" name="spec" value="couples">Couples<br>
<input type="radio" name="spec" value="abuse">Abuse<br>
<input type="radio" name="spec" value="addictions">Addictions<br>
<input type="radio" name="spec" value="loss">Loss<br>
<input type="radio" name="spec" value="depression">Depression<br>
<input type="radio" name="spec" value="family">Family Conflict<br>
<input type="radio" name="spec" value="esteem">Self Esteem
</form
</div>
<div class="insure" id="butt">
<h3>Choose Your Insurance </h3>
<form action="input">
<input type="radio" name="insur" value="harvard">Harvard Pilgrim<br>
<input type="radio" name="insur" value="blueCross">Blue Cross and Blue Shield<br>
<input type="radio" name="insur" value="tufts">Tufts<br>
<input type="radio" name="insur" value="healthNet">Health Net<br>
<input type="radio" name="spec" value="loss">Loss<br>
<input type="radio" name="insur" value="humana">Humana<br>
<input type="radio" name="spec" value="loss">Loss<br>
<input type="radio" name="insur" value="cigna">Cigna
</form>
</div>
</body>
</html>