Всем привет. Сделал скрытие\показ при нажатии на кнопку, но понял что в таком виде код будет слишком большим и наверняка есть более простой способ реализовать это. Если кому не сложно посмотрите и подскажите что изменить или добавить.
http://codepen.io/nojee/pen/GNNpay
<html><head>
<style> #box2,#box3 {display:none;} </style>
<script>
function hide(){
document.getElementById("box1").style.display = 'none';
document.getElementById("box2").style.display = 'none';
document.getElementById("box3").style.display = 'none';
}
function showbox1(){
document.getElementById('box1').style.display = 'block';
}
function showbox2(){
document.getElementById('box2').style.display = 'block';
}
function showbox3(){
document.getElementById('box3').style.display = 'block';
}
</script>
</head>
<body>
<div class="mainbar">
<div id="box1">
<h2>TEST1</h2>
<p>Текст№1</p>
</div>
<div id="box2">
<h2>TEST2</h2>
<p>Текст№2</p>
</div>
<div id="box3">
<h2>TEST3</h2>
<p>Текст№3</p>
</div>
</div>
<input type="button" onclick="hide(), showbox1()" value="test 1" />
<input type="button" onclick="hide(), showbox2()" value="test 2" />
<input type="button" onclick="hide(), showbox3()" value="test 3" />
</body>
</html>
Желательно на чистом js, без использования библиотек.