We Keep Coding

div needs to be clicked twice to trigger event listener js

When I click on the .current-pet-icon div, I need to click it twice before it shows my menu. but every subsequent click after is okay. Just when I refresh / load the page the first time I need to double click. Any help wpuld be greatly appreciated!
Javascript
const menuToggle = document.querySelector('.current-pet-icon')
const openedNav = document.querySelector('.nav-popout');
const shadowNav = document.querySelector('.shadow-nav');
menuToggle.addEventListener('click', () => {
if (openedNav.style.display === "none") {
openedNav.style.display = "block";
shadowNav.style.display = "block";
} else {
openedNav.style.display = "none";
shadowNav.style.display = "none";
}
});
shadowNav.addEventListener('click', () => {
if (openedNav.style.display = "block") {
openedNav.style.display = "none";
shadowNav.style.display = "none";
}
});
HTML
<div class="pet-icon-container">
<img class="current-pet-icon" src="https://www.burgesspetcare.com/wp-content/uploads/2021/08/Hamster.jpg" alt="current pet icon">
</div>

Assuming that there is a CSS style assigned to hide both .nav-popout and .shadow-nav elements initially then a modified version of the original js code appears to function as expected.
const menuToggle = document.querySelector('.current-pet-icon')
const openedNav = document.querySelector('.nav-popout');
const shadowNav = document.querySelector('.shadow-nav');
menuToggle.addEventListener('click', (e)=>{
openedNav.style.display = openedNav.style.display == 'block' ? 'none' : 'block';
shadowNav.style.display = shadowNav.style.display == 'block' ? 'none' : 'block';
});
shadowNav.addEventListener('click', (e)=>{
if( openedNav.style.display == "block" ) {
shadowNav.style.display = openedNav.style.display = "none";
}
});
.pet-icon-container img{
width:150px;
}
.nav-popout,
.shadow-nav{
display:none;
}
<div class="pet-icon-container">
<img class="current-pet-icon" src="https://www.burgesspetcare.com/wp-content/uploads/2021/08/Hamster.jpg" alt="current pet icon" />
</div>
<div class='nav-popout'>#NAV-POPOUT#</div>
<div class='shadow-nav'>#SHADOW-NAV#</div>

A quick console.log(openedNav.style.display) will help you find the issue. In the first call to the click handler, openNav.style.disply is actually empty (not 'none').
Why does this happen
If you access a DOM Element via getElementById, you'll not be able to read the computed style of that element, because it is defined inside the CSS file (I assume you are doing that).
How to fix it
use getComputedStyle. Or see the top answers to these questions if you wanna know more:
document.getElementById(...).style.display is blank
myDiv.style.display returns blank when set in master stylesheet
menuToggle.addEventListener("click", () => {
if (getComputedStyle(openedNav).display=== "none") {
openedNav.style.display = "block";
shadowNav.style.display = "block";
} else {
openedNav.style.display = "none";
shadowNav.style.display = "none";
}
});

CSS-Javascript: Show and Hide div

I want to create a menu where there is just title and a view more link is provided.
If that link is clicked it should open a hidden div and that view more should change to show less or close. And if I click that the div should close again.
So far I have this.
Title 1 View More
<div id="title1_div">
Some Information
</div>
<style>
#title1_div{
display:none;
}
</style>
<script>
function showdiv()
{
document.getElementById('title1_div').style.display = 'block';
}
</script>
This only provides the on click show division. How can I close that div on clicking.
Any help would be appreciated.
Please see this example at JSFiddle: https://jsfiddle.net/eo4cysec/

You just check if the property is set to block, if so you set it to none, else you set it to block. So you have a toggling logic in it.
if(document.getElementById('title1').style.display == 'block') {
document.getElementById('title1').style.display = 'none';
} else {
document.getElementById('title1').style.display = 'block';
}
To set the text to View Less you need the reference of the clicked tag, you pass it as parameter like this:
View More
Then you have the chance to use this parameter and set the innerHTML of it, which is the text that is displayed. So the final function will look like this, where e is now the reference on the a-tag:
function showdiv(e) {
if(document.getElementById('title1').style.display == 'block') {
e.innerHTML = 'View More';
document.getElementById('title1').style.display = 'none';
} else {
e.innerHTML = 'View Less';
document.getElementById('title1').style.display = 'block';
}
}
Please check out this fiddle:
https://jsfiddle.net/g7ry88h7/

Simple function. Call it on click and it'll handle the hide/show:
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}

Here is a working example.
function showdiv(el) {
if (el.innerHTML == "View More") {
document.getElementById('title1').style.display = 'block';
el.innerHTML = "Show Less";
} else {
document.getElementById('title1').style.display = 'none';
el.innerHTML = "View More";
}
}
#title1 {
display: none;
}
Title 1
<div id="title1">
Some Information
</div>
View More

$('a').click(function () {
$(this).next('div').stop(true, true).slideToggle("fast");
if($(this).html() == 'View More'){
$(this).html('View Less');
} else {
$(this).html('View More');
}
}),

Hiding a div with toggle()

I have this button in html
<tr><td>
<button class="btn cmt_list" name="cmtList" id="cmt-'.$row['uid'].'"value = "hide/show"/>Show</button>
</td></tr>
Upon clicking, I'd like to show/hide the div. I would like the div to be hidden by default.
<div class='commentbox' id='comments-{$row['uid']}'></div>
As of now, my javascript looks like this
var toggle = function() {
var mydiv = document.getElementById('newpost');
if (mydiv.style.display === 'block' || mydiv.style.display === '')
mydiv.style.display = 'none';
else
mydiv.style.display = 'block'
}

You don't need to write your own toggle function. You can do it easily with the jQuery toggle function.
Here's the HTML. Setting display: none will make it hidden by default.
<div id="myDiv" style="display: none">
Hello this is my div
</div>
<button id="myBtn">Toggle Div</button>
Here's the jQuery.
$('#myBtn').click(function() {
$('#myDiv').toggle();
});
Working demo: http://jsfiddle.net/eL2AU/
You can also do it with JavaScript alone, like so:
var btn = document.getElementById('myBtn');
btn.onclick = function() {
var d = document.getElementById('myDiv');
if (d.style.display === "none") {
d.style.display = "block";
} else {
d.style.display = "none";
}
};
Demo: http://jsfiddle.net/eL2AU/1/

You are passing the wrong ID to document.getElementById(). Your div has ID comments-{$row['uid']} but you are looking for an element with ID of newpost.

If your issue is hiding the div before it is clicked then put this before your function
$('#myDiv').hide();

Toggle Visibility By Class

Hi can anyone help me please.
How can i use Toggle Visibility by class instead of a id for example.
The Button
Trailer
Then this.
<div class="trailer" style="display:none">{include file="trailer.tpl"}</div>
So how can i modify this javascript to work with classes.
{literal}
<script type="text/javascript">
<!--
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
//-->
</script>
{/literal}
So what would javascript by for this please help.

Use getElementsByClassName
function toggle_visibility(className) {
elements = document.getElementsByClassName(className);
for (var i = 0; i < elements.length; i++) {
elements[i].style.display = elements[i].style.display == 'inline' ? 'none' : 'inline';
}
}

Inline:
<a href="#"
onclick="var div = document.querySelectorAll('trailer')[0];
div.style.display=div.style.display=='none'?'block':'none';return false">Trailer</a>
jQuery:
$(function() {
$("#link").on("click",function(e) {
e.preventDefault();
$(".trailer").toggle();
});
});
Generic jQuery:
$(function() {
$(".link").on("click",function(e) {
e.preventDefault();
$("."+this.id).toggle();
});
});
using
Toggle

function toggle_visibility(className) {
$('.' + className).toggle();
}
you should use jQuery to avoid browser compatibility issues.

Toggle (show/hide) element with javascript

By using this method I can show/hide an element by using 2 buttons:
<script type="text/javascript">
function showStuff(id) {
document.getElementById(id).style.display = 'block';
}
function hideStuff(id) {
document.getElementById(id).style.display = 'none';
}
</script>
<input type="button" onClick="hideStuff('themes')" value="Hide">
<input type="button" onClick="showStuff('themes')" value="Show">
<div id="themes" style="display:block">
<h3>Stuff</h3>
</div>
Is there a method to use a single button?? Maybe if & else?

You've already answered your question...the use of if/else:
function toggle(id) {
var element = document.getElementById(id);
if (element) {
var display = element.style.display;
if (display == "none") {
element.style.display = "block";
} else {
element.style.display = "none";
}
}
}
This won't be completely foolproof, in case you are hiding/showing inline or inline-block elements, or if you are using non-default values for display on elements...such as setting a div's display to "inline" (for whatever reason) and then trying to use this function

Yes if/else will work
function toggle(id){
var elem = document.getElementById(id);
if(elem.style.display == 'block'){
elem.style.display == 'none'
} else if(elem.style.display == 'none'){
elem.style.display == 'block'
}
}

I think you mean something like this:
function toggle(id){
var elem = document.getElementById(id);
if(elem.style.display == "block"){
elem.style.display="none";
} else {
elem.style.display="block";
}
}

Here is an alternate solution. Instead of using document.getElementById, you can also use document.querySelector which returns the first Element within the document that matches the specified selector, or group of selectors.
Solution Code:
function toggleShow() {
var elem = document.querySelector(id);
if(elem.style.display == 'inline-block'){
elem.style.display="none";
}
else {
elem.style.display = "inline-block";
}
}