Показать сообщение отдельно
  #2 (permalink)  
Старый 07.11.2014, 01:57
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

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>

Последний раз редактировалось рони, 07.11.2014 в 02:21.
Ответить с цитированием