Javascript-форум - Скрыть/Отобразить колонку в таблицы

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Скрыть/Отобразить колонку в таблицы (https://javascript.ru/forum/misc/60683-skryt-otobrazit-kolonku-v-tablicy.html)

Скрыть/Отобразить колонку в таблицы

Доброе утро.
Подскажите плз как скрыть/развернуть колонку при нажатие на кнопку.

Сначала после нажатие на кнопку [Скрыть/Развернуть] скрывается первая колонка а вторая растягивается на 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

Развернуть

рони,
На туже кнопку

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, и при отображении вьюхи смотреть на состояние и выдавать соотвествующий результат.

cookie сохранить состояние таблицы на неделю

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 b = document.querySelector(".btn-success"),
        c = document.querySelector(".ms-pub-contentLayout");
    b.addEventListener("click", function(a) {
        a.preventDefault();
        c.classList.toggle("hide");
        a = c.classList.contains("hide");
        var b = new Date((new Date).getTime() + 6048E5);
        document.cookie = "hide=" + a + "; path=/; expires=" + b.toUTCString()
    });
    "true" === function(a) {
        return (a = document.cookie.match(new RegExp("(?:^|; )" + a.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, "\\$1") + "=([^;]*)"))) ?
            decodeURIComponent(a[1]) : void 0
    }("hide") && b.click()
});
</script>
</body>

</html>

Вставлю свои рабоче-крестьянские "5 копеек" :dance:

<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
</head>

<body>
    <input type='button' id='b2' value='Скрыть/Развернуть'>
	<table border="1" class="ms-pub-contentLayout ms-verticalAlignTop">
		<tr>
			<td valign="top" width="300px">1</td> <!--скрыть при нажатие -->
			<td valign="top" width="885px">2</td>
		</tr>
	</table>
   <script>
     document.querySelector('#b2').onclick = function(){
				var td =  document.querySelector('td');
				td.style.display =  td.style.display ? "" : "none" ;
	  };
   </script>
</body>
</html>

Спасибо большое, завтро отпишусь что как.

а так даже понятнее :)

document.querySelector('#b2').onclick = function(){
				var td =  document.querySelector('td');
				td.hidden =  td.hidden ? false : true ;
			};