Как использовать vanilla JavaScript для написания функции переключения, которую я написал в JQuery?

Question

Вчера я пытался заставить этот код работать часами, используя JavaScript, потому что я действительно хотел бы изложить основы как можно лучше, но в конце концов сдался и написал его в JQuery.Очень хотелось бы несколько советов о том, как писать в ванили JS.Я просто пытаюсь использовать кнопку, чтобы показать скрытый «div», поэтому мне кажется, что все должно быть просто, и я просто что-то упускаю:

JQuery:

$('document').ready(function() {
    $('.aboutBtn').click(function() {
        $('#more-brian').toggleClass('hide');
    });
})

HTML:

<div class="row">

            <div class="card col-sm-6">
            <h5 class="card-title">Brian Davis</h5>
              <img class="card-img-top" src="../soccer-travel-site/img/brian-davis.jpg" alt="Brian Davis photo">
              <div class="card-body">
                <p class="card-text">Brian is the founder of AO Adventures and an original host of the BarrelProof Podcast.<button type="button" class="btn btn-danger aboutBtn">More About Brian</button></p>
              </div>
            <div id="more-brian" class="hide">
                <p id="brian-para">Brian is a husband and father who is very passionate about soccer. He has been to over 50 U.S. Men's and Women's National Team games all around the world. In his spare time he is a co-host of the BarrelProof Podcast.</p>
            </div>
            </div>

Я пробовал что-то вроде этого:

function toggle(id){
    var div1 = document.getElementById(id);
    if (div1.style.display == 'none') {
        div1.style.display = 'block'
    } else {
        div1.style.display = 'none'
    }
}

Я не использовал это с классом CSS 'hide'.Но он показывал div при загрузке страницы, а затем скрывал его кнопкой, и я хочу, чтобы произошло обратное.

Answer 1

hidden атрибут сделает свое дело.

<div id="more-brian" hidden>
<p id="brian-para">Brian is a husband and father who is very passionate [...]</p>
</div>

И функция js выглядит следующим образом

function toggle(id) {
    var div1 = document.getElementById(id);
    if(div1.hidden) {
        div1.hidden = false;
    } else {
        div1.hidden = true;
    }
}

Answer 2

Я считаю, что свойство, которое вы ищете, является "className".Попробуйте это:

function toggle(id){
   var x = document.getElementById(id);
   if(x.className == "hide") x.className = "show";
   else x.className = "hide";
}

Затем он определяет аспекты видимости обоих классов в CSS.

Answer 3

Если я правильно понял ваш вопрос, вы бы хотели переключаться между активным и неактивным классом, например, добавляя / удаляя его, например, для меню.Итак, когда вы щелкаете элемент A, чтобы отобразить элемент B, а затем снова нажимаете элемент A, чтобы скрыть элемент B, вы можете сделать это следующим образом:

const elementClicked = document.querySelector("#elementClicked");
const elementYouWantToShow = document.querySelector("#elementYouWantToShow");

elementClicked.addEventListener("click", ()=>{
  elementYouWantToShow.classList.toggle("theClassYouWantToToggleBetween");
});

Надеюсь, это прояснит ситуацию:)

Answer 4

document.addEventListener('DOMContentLoaded', () => {
  const button = document.querySelector('.button');
  const elementToToggle = document.getElementById('element');    

  button.addEventListener('mousedown', () => {
    elementToToggle.classList.toggle('hide');
  });
});

#element {
  height: 100px;
  width: 200px;
  margin-top: 15px;
  background: #ddd;
}

#element.hide {
  display: none;
}

<button class="button">Toggle</button>
<div id="element"></div>

Answer 5

У элементов есть свойство с именем classList, и вы можете выполнять с ним некоторые операции.

function toggle(id, className){
  document.getElementById(id).classList.toggle(className);
}

Взгляните на него https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

Дайте мне знать, если это поможет.