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