Mumcio
6/16/2017 - 2:35 PM

JS Bin // source https://jsbin.com/qufobob

JS Bin

// source https://jsbin.com/qufobob

var $links = $('.menu a');
var $wrapper = $('.container .page');
$links.click(function(){
    var $id = $(this).attr("href");
    
    $wrapper.addClass('hide');
    $("#" + $id).removeClass('hide');
  
//     $( "#" + $id ).addClass('show');

    console.log($id);
});
.hide {
  margin-left: 200%;
} 

a {
  display: block;
}
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Hide all show only one element">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style id="jsbin-css">
.hide {
  margin-left: 200%;
} 

a {
  display: block;
}
</style>
</head>
<body>

  <div class="menu">
    <a href="w1">link1</a>
    <a href="w2">link2</a>
    <a href="w3">link3</a>
    <a href="w4">link4</a>
  </div>
  
  <div class="container">
    <div id="w1" class="page">1</div>
    <div id="w2" class="page hide">2</div>
    <div id="w3" class="page hide">3</div>
    <div id="w4" class="page hide">4</div>
  </div>
  
<script id="jsbin-javascript">
var $links = $('.menu a');
var $wrapper = $('.container .page');
$links.click(function(){
    var $id = $(this).attr("href");
    
    $wrapper.addClass('hide');
    $("#" + $id).removeClass('hide');
  
//     $( "#" + $id ).addClass('show');

    console.log($id);
});
</script>


<script id="jsbin-source-css" type="text/css">.hide {
  margin-left: 200%;
} 

a {
  display: block;
}</script>

<script id="jsbin-source-javascript" type="text/javascript">var $links = $('.menu a');
var $wrapper = $('.container .page');
$links.click(function(){
    var $id = $(this).attr("href");
    
    $wrapper.addClass('hide');
    $("#" + $id).removeClass('hide');
  
//     $( "#" + $id ).addClass('show');

    console.log($id);
});


</script></body>
</html>

<!-- https://www.w3schools.com/jsref/prop_style_transform.asp -->