Here is the current code snippet...
$("#contact").click(function() {
if ( $( "#contact_div" ).length ) {
$("#contact_div").remove();
} else {
var html='<div id="contact_div" class="contact-info"><p>Contact info</p></div>';
$('body').append(html);
}
});
$("#submission").click(function() {
if ( $( "#submission_div" ).length ) {
$("#submission_div").remove();
} else {
var html='<div id="submission_div" class="submission-methods"><p>submission methods</p></div>';
$('body').append(html);
}
});
$("#database").click(function() {
if ( $( "#database_div" ).length ) {
$("#database_div").remove();
} else {
var html='';
$('body').append(html);
}
});
$("#frequent").click(function() {
if ( $( "#frequent_div" ).length ) {
$("#frequent_div").remove();
} else {
var html='<div id="frequent_div" class="Freqeuent kick-codes"><p>frequent kick codes</p></div>';
$('body').append(html);
}
});@charset "utf-8";
/* CSS Document */
body {
padding: 0px;
margin: 0px;
background-image: url("images/mark-athena-2.png");
background-color: #d4d4d4;
}
a {
text-decoration: none;
font-family: "blessed-facit-semibold", "arial Black", Arial;
color: #999999;
font-size: 12px;
padding: 14px;
}
nav {
background-color: #514a79;
height: 25px;
}
a:hover {
color:#e3e3f2;
}
/* color for link= #e3e3f2 */
div {
height: 100px;
width 150px;
border: solid 1px;
margin: 20px;
overflow: hidden;
background-color: #e6e6e6;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Accelorator</title>
<link rel="stylesheet" href="CSS/accel-stylesheet.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.js"></script>
<script type="text/javascript" src="js/cont.js"></script>
</head>
<body>
<nav>
<a href="#">Home</a>
<a id="contact" href="#">Contact info</a>
<a id="submission" href="#">Submission methods</a>
<a id="database" href="#">Data base</a>
<a id="frequent" href="#">Frequent kick codes</a>
</nav>
<div id="contact_div" class="contact-info">
<p>Contact info</p>
</div>
<div id="submission_div" class="submission-methods">
<p>submission methods</p>
</div>
<div id="frequent_div" class="Freqeuent kick-codes">
<p>frequent kick codes</p>
</div>
</body>
</html>I want to create a dynamic navigation structure where clicking on specific links toggles the display of corresponding content divs. Each div should stay displayed until toggled off by the same button that activated it.
This is my HTML markup for this project...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Accelorator</title>
<link rel="stylesheet" href="CSS/accel-stylesheet.css">
</head>
<body>
<nav>
<a href="#">Home</a>
<a href="#">Contact info</a>
<a href="#">Submission methods</a>
<a href="#">Data base</a>
<a href="#">Frequent kick codes</a>
</nav>
<div class="contact-info">
<p>Contact info</p>
</div>
<div class="submission-methods">
<p>submission methods</p>
</div>
<div class="Freqeuent kick-codes">
<p>frequent kick codes</p>
</div>
</body>
</html>
And here is my css
@charset "utf-8";
/* CSS Document */
body {
padding: 0px;
margin: 0px;
background-color: #d4d4d4;
}
a {
text-decoration: none;
font-family: "blessed-facit-semibold", "arial Black", Arial;
color: #999999;
font-size: 12px;
padding: 14px;
}
nav {
background-color: #514a79;
height: 25px;
}
a:hover {
color:#e3e3f2;
}
/* color for link= #e3e3f2 */
div {
height: 100px;
width 150px;
border: solid 1px;
margin: 20px;
overflow: hidden;
background-color: #e6e6e6;
}