Скрыть/Отобразить колонку в таблицы
Доброе утро.
Подскажите плз как скрыть/развернуть колонку при нажатие на кнопку. Сначала после нажатие на кнопку [Скрыть/Развернуть] скрывается первая колонка а вторая растягивается на 100%. И обратное действие. Спасибо. <table border="0" class="ms-pub-contentLayout ms-verticalAlignTop"> <tr> <td valign="top" width="300px"> </td> <!--скрыть при нажатие --> <td valign="top" width="885px"> </td> </tr> </table> |
Castromen,
а на что жмакать для Цитата:
|
рони,
На туже кнопку |
Castromen,
и где кнопа? |
<button class="btn btn-success active" type="button"><span class="glyphicon glyphicon-th-list"></span>
Скрыть/Развернуть</button> |
Castromen,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
td{
height: 45px;
border: 1px solid #0000FF;
transition: all .8s ease-in-out;
}
.hide td:nth-child(1){
display: none;
}
.hide td:nth-child(2){
width: 1185px;
background-color: #1E90FF;
}
table{
border-collapse: collapse;
}
</style>
</head>
<body>
<table border="0" class="ms-pub-contentLayout ms-verticalAlignTop">
<tr>
<td valign="top" width="300px"> </td> <!--скрыть при нажатие -->
<td valign="top" width="885px"> </td>
</tr>
</table>
<button class="btn btn-success active" type="button"><span class="glyphicon glyphicon-th-list"></span>
Скрыть/Развернуть</button>
<script>
window.addEventListener("DOMContentLoaded", function() {
var d = document.querySelector(".btn-success"),
e = document.querySelector(".ms-pub-contentLayout");
d.addEventListener("click", function(a) {
a.preventDefault();
e.classList.toggle("hide")
})
});
</script>
</body>
</html>
|
рони, спасибо.
Странно но у меня почему то не работает =( |
Castromen,
смотрите ваше css |
рони,
Спасибо все поправил. Вопрос а как закрепить за пользователем допустим если он скрыл а то при обновление и переходе на другую страницу опять открывается левая колонка. |
Castromen, для этого тебе нужно сохранять состояние в cookie, и при отображении вьюхи смотреть на состояние и выдавать соотвествующий результат.
|
| Часовой пояс GMT +3, время: 03:30. |