I have a situation in my code where I need to toggle between two a elements to display a hidden div with content one at a time. This functionality is similar to how the Facebook notification center works when you click on the icons, which I'm sure most of you have encountered on the top left corner near the logo on the Facebook website. How does that mechanism actually work?
Below is the code snippet I am working with:
<style>
div, a {
display: block;
}
body {
width: 500px;
margin: 100px auto;
}
a {
border: 1px solid #ccc;
background: #ececec;
-webkit-border-radius: 3px;
padding: 5px 20px;
text-align: center;
color: red;
text-decoration: none;
}
#one {
margin-bottom: 30px;
}
.dn_js {
display: none;
}
.db_js {
display: block;
}
</style>
Here is the HTML structure:
<div class="wrap">
<div id="one">
<a href="#" data-open="frdz" class="aTggl active">Friends</a>
<div id="frdz" class="innerWrap dn_js">Mike</div>
</div>
<div id="two">
<a href="#" data-open="Ntfn" class="aTggl">Notifications</a>
<div id="Ntfn" class="innerWrap dn_js">Peter</div>
</div>
</div>
And here is the jQuery code used for toggling the elements:
<script type="text/javascript">
$(document).ready(function (e) {
$(".aTggl").on("click", function(e) {
e.preventDefault();
var $this = $(this);
$(".active").removeClass("active");
$this.addClass("active").parent().siblings().children(".innerWrap").addClass("dn_js");
var content_show = $(this).data("open");
$("#" + content_show).addClass("db_js");
});
});
</script>