How to Toggle “a” tag elements to show hidden DIVs just like the Facebook notification center

Question

In my source code, I have two a elements I want to toggle to display a hidden div with content one at a time. Just like how the Facebook notification center operates when the icons are clicked and I think, all of you have at-least interacted with the Facebook notifications center on the top left near the logo on the Facebook website. How do they workout that?

Here is my code below

    <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 my HTML

    <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">Noticiations</a>
        <div id="Ntfn" class="innerWrap dn_js">Peter</div>
    </div>
</div>

And here is my jQuery code below

  <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>

Answer 1

So here you are, like mg007 pointed out already better use toggle() and toggleClass()

Fiddle: http://jsfiddle.net/dASdJ/2/

var switchToggle = function (toggleEle) {
    $('#' + $(toggleEle).data('open')).toggle('slow', function() {
        // Animation complete.
          $(this).parent().children('.aTggl').toggleClass('active');
    });
 }

$('.aTggl').click(function(e) {
    e.preventDefault();
    switchToggle($(this));

    if (!$(this).hasClass('active')) {
        $('.active').each(function() {
          switchToggle($(this));
        });
    }
});