SmilingDog,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
body, html{
display: table-row;
}
.basiccontainer
{
margin:10px;
width:300px;
height:220px;
border:solid black 1px;
text-align: center;
display: table-cell;
}
.hiddencontainer
{
margin:10px;
width:300px;
height:200px;
text-align: center;
border:solid black 1px;
display: table-cell;
}
.vbutton {
width:30px;
background: #2E8CE3; /* Цвет фона */
padding: 20px 10px; /* Поля вокруг текста */
margin: 10px;
font-size: 13px; /* Размер шрифта */
font-weight: bold; /* Насыщенность шрифта */
color: #FFFFFF; /* Цвет шрифта */
text-align: center; /* Надпись на кнопке по центру */
border: solid 1px #73C8F0; /* Параметры рамки кнопки */
cursor: pointer; /* Изменение вида курсора при наведении*/
writing-mode: tb-rl;
-webkit-writing-mode: vertical-rl;
display: inline-block;
}
.button-block {
display: table-cell;
}
</style>
</head>
<body> <div class="hiddencontainer" id="hidden_text">
Скрытый контейнер
</div>
<div class="button-block">
<a class="vbutton" id="hiding_btn">Кнопка</a>
</div>
<div class="basiccontainer">
Основной контейнер
<div id="imsg"></div>
</div>
<script>
function infoButton() {
var msg = document.getElementById("imsg");
var hidden_block = document.getElementById("hidden_text");
var info_btn = document.getElementById("hiding_btn");
imsg.innerText = "Clicked";
if(info_btn) {
if(localStorage["hidden_info"]) {
localStorage.removeItem("hidden_info");
hidden_block.style.display="none";
imsg.innerText = "Hide";
} else {
imsg.innerText = "Show";
localStorage.setItem("hidden_info",1);
hidden_block.style.display="table-cell";
}
}
}
function addWindowCallbacks() {
var info_btn = document.getElementById("hiding_btn");
if(info_btn) {
info_btn.addEventListener("click", infoButton , false);
}
}
document.addEventListener('DOMContentLoaded', addWindowCallbacks,false);
</script>
</body>
</html>