Открывайте и закрывайте разные div через меню

У меня проблемы с JavaScript, связанные с включением и выключением видимости между элементами div.

У меня есть две колонки; слева находится меню, а справа место, где я хотел бы отображать разные элементы div. Мое намерение таково:

Когда вы нажимаете на пункт меню, соответствующий div появляется справа. (т.е. дисплей: блок)
При повторном нажатии на тот же пункт меню соответствующий div закрывается (т.е. display: none)
Когда вы нажимаете на меню элемент, соответствующий div открывается, И все остальные открытые div закрываются.

У меня это работает почти так, как я хочу, хотя текущая проблема заключается в том, что для открытия div требуется дважды щелкнуть. Кроме того, поскольку я новичок в javascript, я думаю, что мой код НАМНОГО более громоздкий, чем должен быть. Я просмотрел похожие примеры, но не могу найти ответ. Любая помощь приветствуется!

function switchVisible() {
  if (document.getElementById('hidden1')) {
      if (document.getElementById('hidden1').style.display == 'none') {
          document.getElementById('hidden1').style.display = 'block';
          document.getElementById('hidden2').style.display = 'none';
  document.getElementById('hidden3').style.display = 'none';
      }
      else {
  document.getElementById('hidden1').style.display = 'none';
      }
  }
}



function switchVisible2() {
  if (document.getElementById('hidden2')) {

      if (document.getElementById('hidden2').style.display == 'none') {
          document.getElementById('hidden2').style.display = 'block';
          document.getElementById('hidden1').style.display = 'none';
  document.getElementById('hidden3').style.display = 'none';
      }
      else {
          document.getElementById('hidden2').style.display = 'none';

      }
  }
}


function switchVisible3() {
  if (document.getElementById('hidden3')) {

      if (document.getElementById('hidden3').style.display == 'none') {
          document.getElementById('hidden3').style.display = 'block';
          document.getElementById('hidden1').style.display = 'none';
  document.getElementById('hidden2').style.display = 'none';
      }
      else {
          document.getElementById('hidden3').style.display = 'none';

      }
  }
}

<div class = "leftcolumn">

  <div class = "leftmenu">

    <div class = "subheader" onclick = "switchVisible()">Content 1</div>

    <div class = "subheader" onclick = "switchVisible2()">Content 2</div>

    <div class = "subheader" onclick = "switchVisible3()">Content 3</div>

  </div>

</div>

<div class = "rightcolumn">

  <div id = "hidden1">

    Content 1

  </div>

  <div id = "hidden2">

    Content 2

  </div>

  <div id = "hidden3">

    Content 3

  </div>
  
</div>

javascript css onclick toggle visibility

10.04.2019 01:22

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

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

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Я бы вместо того, чтобы сделать его невидимым, просто чтобы сместить его на много, затем установить это значение как глобальную переменную, а затем просто установить его в атрибут позиции CSS. Не забудьте сделать позицию относительной!

10.04.2019 01:25

Ответ принят как подходящий

Вы можете добавить аналогичные классы к элементам, чтобы использовать их в качестве эталона. Затем переключите один класс в соответствующий щелкнутый контейнер:

function switchVisible(el) {
  var classN = el.classList.value.split(' ')[1];
  if (classN == 'c1'){
    document.querySelector('.rightcolumn .c1').classList.toggle('hideContent');
  }
  else if (classN == 'c2'){
    document.querySelector('.rightcolumn .c2').classList.toggle('hideContent');
  }
  else if (classN == 'c3'){
    document.querySelector('.rightcolumn .c3').classList.toggle('hideContent');
  }
  
  var arrayOfElements = document.querySelectorAll('.rightcolumn div').forEach(function(div,i){
    if (!div.classList.value.includes(classN) && !div.classList.value.includes('hideContent')){
      div.classList.toggle('hideContent');
    }
  });
}

.rightcolumn div {
  font-size:20px;
  color: green;
}
.hideContent{
  display:none;
}

<div class = "leftcolumn">

  <div class = "leftmenu">

    <div class = "subheader c1" onclick = "switchVisible(this)">Content 1</div>

    <div class = "subheader c2" onclick = "switchVisible(this)">Content 2</div>

    <div class = "subheader c3" onclick = "switchVisible(this)">Content 3</div>

  </div>

</div>

<div class = "rightcolumn">

  <div id = "hidden1" class = "c1 hideContent">Content 1</div>
  <div id = "hidden2" class = "c2 hideContent">Content 2</div>
  <div id = "hidden3" class = "c3 hideContent">Content 3</div>

</div>

Отлично, спасибо за это! Имеет смысл добавить эталонные классы.

— 10.04.2019 02:13

Еще один быстрый вопрос; если бы я хотел, чтобы div были скрыты по умолчанию, было бы это случаем изменения hideContent на «display: block» вместо «none» и изменения CSS div на «display: none» при загрузке страницы?

— 10.04.2019 02:26

@jordanmiller, я обновил ответ, чтобы изначально скрыть содержимое, пожалуйста, проверьте :)

— 10.04.2019 02:41

10.04.2019 01:45