How do I use vanilla JavaScript to write a toggle function I wrote in JQuery?

Question

Was trying to get this code working for hours yesterday using JavaScript because I'd really like to get the basics down as best possible, but finally gave up and wrote it in JQuery. Would love some advice on how to write in in vanilla JS. I am just trying to use a button to show a hidden "div" so I feel like it should be simple and I'm just overlooking something:

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>

I tried something like this:

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

I didn't use this with the CSS 'hide' class. But it was showing the div on page load, then hiding it with the button, and I want the opposite to happen.

Answer 1

If I understood your question correctly, you'd like to toggle between a class being active and inactive, like adding / removing it, for example for a menu. So, when you click element A, to display element B, and then click element A again to hide element B, you can do it like this:

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

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

Hopefully this clears things up :)

Answer 2

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 3

hidden attribute will do the trick.

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

And js function goes like this

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

Answer 4

I believe the property you are looking for is the "className". Try this:

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

Then it defines visibility aspects of both classes in CSS.