CODEWITHSUNDEEP
javascriptjquerytoggleshow-hide
brianna124
brianna124

Reputation: 127

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

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.

Upvotes: 8

Views: 22187

Answers (5)

Sumanth Hr
Sumanth Hr

Reputation: 21

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

Upvotes: 2

Wagner de Andrade Perin
Wagner de Andrade Perin

Reputation: 342

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.

Upvotes: 1

Solo
Solo

Reputation: 6977

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>

Upvotes: 4

Petar
Petar

Reputation: 678

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

Upvotes: 14

Alejandro Garcia Anglada
Alejandro Garcia Anglada

Reputation: 2403

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.

Upvotes: 0

Related Questions