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>
</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.

div1.classList.toggle('hide'); with the hide class.

Andy
– Andy

2018-11-29 13:00:00 +00:00
Commented Nov 29, 2018 at 13:00 — Andy
– Andy, Commented Nov 29, 2018 at 13:00

Petar · Accepted Answer · 2018-11-29 13:01:26Z

14

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 :)

answered Nov 29, 2018 at 13:01

Petar

6886 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

brianna124 Over a year ago

This worked perfectly! Thanks so much. I knew it had to be something really simple that I was overlooking!

Petar Over a year ago

Glad I could help :)

Solo · Accepted Answer · 2018-11-29 13:01:34Z

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>

answered Nov 29, 2018 at 13:01

Solo

7,0438 gold badges40 silver badges77 bronze badges

Comments

Xan · Accepted Answer · 2018-11-29 13:21:45Z

2

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;
    }
}

edited Nov 29, 2018 at 13:21

Xan

77.9k18 gold badges198 silver badges219 bronze badges

answered Nov 29, 2018 at 13:12

Sumanth Hr

211 bronze badge

Comments

Wagner de Andrade Perin · Accepted Answer · 2018-11-29 13:05:26Z

1

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.

answered Nov 29, 2018 at 13:05

Wagner de Andrade Perin

3424 silver badges15 bronze badges

Comments

Alejandro Garcia Anglada · Accepted Answer · 2018-11-29 13:00:59Z

0

Elements have got a property called classList and you can run some operations on it.

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

Take a look at it https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

Let me know if this help.

answered Nov 29, 2018 at 13:00

Alejandro Garcia Anglada

2,4031 gold badge29 silver badges41 bronze badges

Collectives™ on Stack Overflow

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

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related