How to flip multiple div's using css3

[vizz]

How to flip multiple div when clicked on menus?
Current code is working for only last two div's.

code in work on jsfiddle

HTML

<ul class="nav">
    <li><a href="#home">home</a></li>
    <li><a href="#about">about</a></li>
    <li><a href="#work">work</a></li>
    <li><a href="#contact">contact</a></li>
</ul>

 <section class="container">
    <div id="card">
      <div class="front flipper" id="home">home</div>
      <div class="back flipper" id="about">about</div>
      <div class="front flipper" id="work">work</div>
      <div class="back flipper" id="contact">contact</div>
    </div>
  </section>

CSS

.container {
  width: 500px;
  height: 360px;
  position: relative;
  margin: 0 auto 40px;
  border: 1px solid #CCC;
  -webkit-perspective: 800px;
     -moz-perspective: 800px;
       -o-perspective: 800px;
          perspective: 800px;
}

#card {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-transition: -webkit-transform 1s;
     -moz-transition: -moz-transform 1s;
       -o-transition: -o-transform 1s;
          transition: transform 1s;
  -webkit-transform-style: preserve-3d;
     -moz-transform-style: preserve-3d;
       -o-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

#card.flipped {
  -webkit-transform: rotateX( 180deg );
     -moz-transform: rotateX( 180deg );
       -o-transform: rotateX( 180deg );
          transform: rotateX( 180deg );
}

#card .flipper {
  display: block;
  height: 100%;
  width: 100%;
  line-height: 260px;
  color: white;
  text-align: center;
  font-weight: bold;
  font-size: 140px;
  position: absolute;
  -webkit-backface-visibility: hidden;
     -moz-backface-visibility: hidden;
       -o-backface-visibility: hidden;
          backface-visibility: hidden;
}
.flipper{ background:#963}
#card .front {
  background: red;
}

#card .back {
  background: blue;
  -webkit-transform: rotateX( 180deg );
     -moz-transform: rotateX( 180deg );
       -o-transform: rotateX( 180deg );
          transform: rotateX( 180deg );

}

script

$(".nav li").on("click", function(){

    var activeTab = $(this).find("a").attr("href");

    //  alert(activeTab);

    if($("#card").hasClass("flipped"))
    {
        $("#card").removeClass("flipped");         
    }
    else
    {
        $("#card").addClass("flipped"); 
    }

    return false;
});

[Jad4]

Try this :

$(".nav li").on("click", function(){

    var activeTab = $(this).find("a").attr("href");

    //  alert(activeTab);
$('#card').find('div').css('visibility', 'hidden');
$(activeTab).css('visibility', 'visible');
    if($("#card").hasClass("flipped"))
    {
        $("#card").removeClass("flipped");         
    }
    else
    {
        $("#card").addClass("flipped"); 
    }

    return false;
});

For test it run this