jquery - How to Toggle "a" tag elements to show hidden DIVs just like the Facebook notification center -

in source code, have 2 a elements want toggle display hidden div content 1 @ time. how facebook notification center operates when icons clicked , think, of have at-least interacted facebook notifications center on top left near logo on facebook website. how workout that?

here code below

    <style>     div, {         display: block;     }      body {         width: 500px;         margin: 100px auto;     }      {         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 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 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> 

so here are, mg007 pointed out better use toggle() , 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));         });     } });