<style type="text/css">
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}body,td,th {
font-family: "Lucida Console", Monaco, monospace;
font-size: 100%;
color: #333;
}body { background-color: #9CF;
}
.title { background-color:#FFF;
border-color:#999;
border-width: medium;
border-style:dotted;
padding: 2%;
margin: 0.5%;
width: 95%; }.content { background-color:#9C6;
display: none;
height: auto;
padding: 2%;
width: 95%;
margin-top: 2%; }/* FOR DEMO PURPOSES NOT RELEVANT TO CODE */
.code { width: 60%;
height: auto;
background-color:#FFF;
padding: 2%;
font-size:60%; }</style>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(e) {
$(".title").on("click", showHideMe);
function showHideMe(event) {
// VERY IMPORTANT : You must add the "#" or the "." when you declare the variable
// $(this) refers to the object that has been clicked on
// .children(".content") looks for any elements inside my DIV that have a class called ".content"
// .attr('id') grabs the id of the interior division with the class ".content"
var mycontent = "#" + $(this).children(".content").attr('id');
$(mycontent).toggle("fast");
};
});
</script></head>
<body>
<div id="info" class="title clearfix"> INFO
<div id="infocontent" class="content">
INFO CONTENT INFO CONTENT INFO CONTENT INFO CONTENT
INFO CONTENT INFO CONTENT INFO CONTENT INFO CONTENT
INFO CONTENT INFO CONTENT INFO CONTENT INFO CONTENT
INFO CONTENT INFO CONTENT INFO CONTENT INFO CONTENT
</div>
</div><div id="bio" class="title clearfix"> BIO
<div id="biocontent" class="content">
BIO CONTENTBIO CONTENTBIO CONTENTBIO CONTENTBIO
</div>
</div><div id="contact" class="title clearfix"> CONTACT
<div id="contactcontent" class="content">
CONTACT CONTENT CONTACT CONTENT CONTACT CONTENT
</div>
</div>