Блог

Главная - Вопросы по программированию - Как сделать кнопку, чтобы скрыть один столбец и развернуть другой столбец?

Как сделать кнопку, чтобы скрыть один столбец и развернуть другой столбец?

#javascript #html #css

#javascript #HTML #css

Вопрос:

Я создаю веб-сайт с использованием WordPress и elementor page builder.

Я намеревался создать шаблон, который позволяет «читать без отвлекающих факторов» в post. В основном, шаблон имеет 2 столбца: «post-sidebar» и «post-main». Нажатие на кнопку скроет «пост-боковую панель», а затем выровняет: по центру и увеличит ширину «пост-основной».

Я ничего не знаю о коде, но после исследований за последние несколько дней мне удалось скрыть боковую панель при нажатии, но я все еще не знаю, как обрабатывать оставшийся столбец по назначению.

Я вставляю html-виджет, как показано ниже:

 <!DOCTYPE html>
<html>

<body>


<button onclick="myFunction()">Focus Reading</button>

<div id="focus-button">

</div>


<script>
function myFunction() {
  var x = document.getElementById("post-sidebar");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
</script>
</body>
</html>

Было бы здорово, если бы кто-нибудь мог взглянуть и высказать мнение по этому поводу.

Большое спасибо, с уважением,

Комментарии:

1.Там нет id пост-боковой панели, вместо этого это должна быть кнопка фокусировки

Ответ №1:

Используйте jQuery для простоты использования

Дайте кнопке класс, скажем, class=»focus-reading», дайте столбцам несколько классов, таких как class=»column1″, другой class =»column2″, затем выполните следующее:

затем:

 $(document).ready(function(){
   $('.focus-reading').click(function(){
      $('.column1').toggle();
      $('.column2').toggleClass("width100");
   });
});

Или что-то в этом роде? Это должно отключить / включить эти элементы и просто добавить класс в таблицу стилей .width100{} и сделать его таким широким, каким вы хотите, для оставшегося столбца.