Develop Reference

How to show and hide div elements using vanilla js

Below is code where i tried to show and hide div elements using pure js. Since when i click button it take three click to hide the div elemnts and after that it run smoothly. I was trying to find how to show elemnts in first click.
var count = 0;
function showMee() {
var buttonHome = document.querySelector("#showMe");
count += 1;
buttonHome.addEventListener("click", function() {
if (count == 1) {
document.querySelector('#linkMeOne').style.display = 'none';
document.querySelector('#linkMeTwo').style.display = 'none';
} else if (count == 2) {
document.querySelector('#linkMeOne').style.display = 'block';
document.querySelector('#linkMeTwo').style.display = 'block';
count = 0;
}
});
}
#linkMeOne {
display: block;
}
#linkMeTwo {
display: block;
}
<div id="linkMeOne">
Hiding me As first time....
</div>
<div id="linkMeTwo">
Hiding me as well as...
</div>
<input type="button" value="Check Me" id="showMe" onclick="showMee()" />

Just toggle hidden.
If you want them to start out hidden, add the hidden attribute to the divs
const div1 = document.getElementById("linkMeOne");
const div2 = document.getElementById("linkMeTwo")
document.querySelector("#showMe").addEventListener("click",function() {
div1.hidden = !div1.hidden;
div2.hidden = !div2.hidden;
})
<div id="linkMeOne">
Hiding me As first time....
</div>
<div id="linkMeTwo">
Hiding me as well as...
</div>
<input type="button" value="Check Me" id="showMe" />

Just remove the addEventlistener and the code will start working.
var count = 0;
function showMee() {
var buttonHome = document.querySelector("#showMe");
count += 1;
//buttonHome.addEventListener("click", function() {
if (count == 1) {
document.querySelector('#linkMeOne').style.display = 'none';
document.querySelector('#linkMeTwo').style.display = 'none';
} else if (count == 2) {
document.querySelector('#linkMeOne').style.display = 'block';
document.querySelector('#linkMeTwo').style.display = 'block';
count = 0;
}
//});
}
#linkMeOne {
display: block;
}
#linkMeTwo {
display: block;
}
<div id="linkMeOne">
Hiding me As first time....
</div>
<div id="linkMeTwo">
Hiding me as well as...
</div>
<input type="button" value="Check Me" id="showMe" onclick="showMee()" />
Instead of using a variable, use a class to set the display to none.
function showMee() {
document.querySelector('#linkMeOne').classList.toggle('hidden');
document.querySelector('#linkMeTwo').classList.toggle('hidden')
}
#linkMeOne {
display: block;
}
#linkMeTwo {
display: block;
}
.hidden {
display: none !important;
}
<div id="linkMeOne">
Hiding me As first time....
</div>
<div id="linkMeTwo">
Hiding me as well as...
</div>
<input type="button" value="Check Me" id="showMe" onclick="showMee()" />

While there are many correct answers, all of them lack simplicity.
The easiest of all solution is to add an eventListener to the button and toggle a class to all elements with a certain class. That way you don't have to list every single element:
document.querySelector('#showMe').addEventListener('click', function() {
document.querySelectorAll('.linkMe').forEach(el =>
el.classList.toggle('d-block')
);
})
.linkMe {
display: none;
}
.d-block {
display: block;
}
<div class="linkMe">
Hiding me As first time....
</div>
<div class="linkMe">
Hiding me as well as...
</div>
<input type="button" value="Check Me" id="showMe" />

You could just toggle using a data attribute and some CSS. Here is a verbose version of that:
document.querySelector("#showMe")
.addEventListener("click", (event) => {
const t = event.target;
const showem = t.dataset.show;
document.querySelectorAll('.can-toggle').forEach((element) => {
element.dataset.show = showem;
});
t.dataset.show = showem == "show" ? "hide" : "show";
});
.can-toggle[data-show="hide"] {
display: none;
}
<div class="can-toggle">
Hiding me As first time....
</div>
<div class="can-toggle">
Hiding me as well as...
</div>
<input type="button" value="Check Me" id="showMe" data-show="hide" />
OR even independently with an initial state:
document.querySelector("#showMe")
.addEventListener("click", (event) => {
document.querySelectorAll('.can-toggle').forEach((element) => {
element.dataset.show = element.dataset.show == "hide" ? "show" : "hide";
});
});
.can-toggle[data-show="hide"] {
display: none;
}
<div class="can-toggle" data-show="hide">
Hiding me As first time....
</div>
<div class="can-toggle">
Hiding me as well as...
</div>
<div class="can-toggle" data-show="Ishow">
What am I?
</div>
<input type="button" value="Check Me" id="showMe" data-show="hide" />

On/Off Button to Activate function

I'm looking to have the mouse hover function active only when my button is On and when my button is off have it not activate the hover function. I can get the hover to work but not when its on
function changeBoxColor() {
let myBox = document.getElementById("myBox");
if (myBox.style.backgroundColor === "green") {
myBox.style.backgroundColor = "red";
} else {
myBox.style.backgroundColor = "green";
}
}
document.getElementById("myBox").addEventListener("mouseover", changeBoxColor);
document.getElementById("myBox").addEventListener("mouseleave", changeBoxColor);
function changeToggleButton() {
let toggleButton = document.getElementById("toggleButton");
if (toggleButton.value === "ON") {
toggleButton.value = "OFF";
} else {
toggleButton.value = "ON";
}
}
document.getElementById("toggleButton").addEventListener("click", changeToggleButton);
<input id="toggleButton" type="button" value="ON">
<div style="height: 400px; width: 400px; background-color: red;" id="myBox"></div>

Like j08691 commented above, you just aren't binding the change in EventListeners on load, or change of the toggle button. Here is updated code that does exactly this:
function changeToggleButton() {
let toggleButton = document.getElementById("toggleButton");
if (toggleButton.value === "ON") {
toggleButton.value = "OFF";
document.getElementById("myBox").removeEventListener("mouseover", changeBoxColor);
document.getElementById("myBox").removeEventListener("mouseleave", changeBoxColor);
} else {
toggleButton.value = "ON";
document.getElementById("myBox").addEventListener("mouseover", changeBoxColor);
document.getElementById("myBox").addEventListener("mouseleave", changeBoxColor);
}
}
document.getElementById("myBox").addEventListener("mouseover", changeBoxColor);
document.getElementById("myBox").addEventListener("mouseleave", changeBoxColor);
document.getElementById("toggleButton").addEventListener("click", changeToggleButton);
Now, this code assumes that the toggleButton starts as on, which is why we automatically addEventListener when the script is loaded. The other change is that when you check the toggleButton.value, we add/remove the EventListener from the element.

Simple add the events when the button value is 'ON', otherwise remove the events
function changeBoxColor() {
let myBox = document.getElementById("myBox");
if (myBox.style.backgroundColor === "green") {
myBox.style.backgroundColor = "red";
} else {
myBox.style.backgroundColor = "green";
}
}
document.getElementById("myBox").addEventListener("mouseover", changeBoxColor);
document.getElementById("myBox").addEventListener("mouseleave", changeBoxColor);
var eventOver = ["mouseover",changeBoxColor];
var eventLeave = ["mouseleave",changeBoxColor];
function changeToggleButton() {
let toggleButton = document.getElementById("toggleButton");
if (toggleButton.value === "ON") {
toggleButton.value = "OFF";
document.getElementById("myBox").removeEventListener(...eventOver);
document.getElementById("myBox").removeEventListener(...eventLeave);
} else {
toggleButton.value = "ON";
document.getElementById("myBox").addEventListener(...eventOver);
document.getElementById("myBox").addEventListener(...eventLeave);
}
}
document.getElementById("toggleButton").addEventListener("click", changeToggleButton);
<input id="toggleButton" type="button" value="ON">
<div style="height: 400px; width: 400px; background-color: red;" id="myBox"></div>

FWIW, this can be done using HTML and CSS only, if you accept that your 'toggle button' can be a checkbox (a checkbox basically is a toggle button).
You can then use an attribute selector to find the checkbox, or simply select it using its class or id. Then, using + div and + div:hover, you can style the div after it.
The trick is in this selector:
input[type=checkbox]:checked + div:hover
Which basically says, target a hovered div, that is right after a checked input of type checkbox.
input[type=checkbox] + div {
height: 400px;
width: 400px;
background-color: red;
}
input[type=checkbox]:checked + div:hover {
background-color:green;
}
<input id="toggleButton" type="checkbox" value="">
<div id="myBox"></div>
Of course, you can style the checkbox to look more like the button you want, or hide it completely and use a <label for="toggleButton"></label>, which can take the place of the checkbox visually, and be styled however you like.
Or, you can even use a normal button, and just change the class of the button on click. You can then still use CSS to style the div.
This could be done using <input, but you'd have to set the value through JavaScript. For the sake of example, I used <button, which has content rather than a value, and so you can toggle the caption as well using CSS, if you would like that.
(function(element) {
element.addEventListener('click', function() {
if (element.classList.contains('on'))
element.classList.remove('on');
else
element.classList.add('on');
});
})(document.getElementById('toggleButton'));
button + div {
height: 400px;
width: 400px;
background-color: red;
}
button.on + div:hover {
background-color:green;
}
/* If you like, you can even set the button text in CSS, but
beware of accessibility issues. */
button:after {
content: "off";
}
button.on:after {
content: "on";
}
<button id="toggleButton" type="button"></button>
<div id="myBox"></div>

javascript expand/collapse text - collapse on default

I'm very inexperienced in javascript but have managed (with the help of google) to put together the following expandable/collapsible link
<script type="text/javascript">
function toggleMe(a) {
var e = document.getElementById(a);
if(!e) return true;
if(e.style.display == "none") {
e.style.display = "block"
}
else {
e.style.display = "none"
}
return true;
}
</script>
<p>
<input onclick="return toggleMe('para1')" style="font-size:18px; color:#008080;" type="text" value="LINK TO EXPAND" />
</p>
<p id="para1">
<strong><em>text text text text</em></strong>
</p>
The only problem with it is that it is expanded by default and I wanted it collapsed by default. Can anyone help with this? Thank you!
Also, if anyone knows how to get +/- signs next to the link that change depending on whether it is expanded or collapsed, that would be great.

<script type="text/javascript">
function toggleMe(a) {
var e = document.getElementById(a);
var toggleIcon = document.getElementById('toggle-icon');
if(!e) return true;
if(e.style.display == "none") {
e.style.display = "block";
toggleIcon.innerHTML = '-';
}
else {
e.style.display = "none";
toggleIcon.innerHTML = '+';
}
return true;
}
</script>
<p>
<input onclick="return toggleMe('para1')" style="font-size:18px; color:#008080;" type="text" value="LINK TO EXPAND" />
<span id="toggle-icon">+</span>
</p>
<p id="para1" style="display: none;">
<strong><em>text text text text</em></strong>
</p>

You can try putting in style statement the display option like below:
<p id="para1" style="display:none"><strong><em>text text text text</em></strong></p>
That can default collapse when you open your html, hope it help you...

Options 1:
Add this to your css to hide it by default:
#para1 {
display: none;
}
Options 2:
Move your script down, and call it initially toggleMe('para1'); so you will hide it first.
<p>
<input onclick="return toggleMe('para1')" style="font-size:18px; color:#008080;" type="text" value="LINK TO EXPAND" />
</p>
<p id="para1">
<strong><em>text text text text</em></strong>
</p>
<script type="text/javascript">
function toggleMe(a) {
var e = document.getElementById(a);
if(!e) return true;
if(e.style.display == "none") {
e.style.display = "block"
}
else {
e.style.display = "none"
}
return true;
}
toggleMe('para1');
</script>

Daniel has the correct answer to your question. This is a bit more than you asked for, but I think you will have a better time if you manipulate classes instead of element styles properties. Just makes it a bit more flexible.
In the example below I wrapped your code in a common element and then changed that element's class to achieve your desired effect. That let me easily add in your plus and minus too.
It's a little raw but you can see where this can take you. Hope it helps.
https://jsfiddle.net/6xoe1b94/
function toggleMe(a) {
var e = document.getElementById('wrapper');
if(! e.classList.contains('active')) {
e.classList.add('active');
}
else {
e.classList.remove('active');
}
}
#para1{
display:none;
}
.active #para1{
display:block;
}
#plus{
display:inline-block;
}
#minus{
display:none;
}
.active #plus{
display:none;
}
.active #minus{
display:inline-block;
}
<div id='wrapper'>
<p>
<input onclick="return toggleMe('para1')" style="font-size:18px; color:#008080;" type="text" value="LINK TO EXPAND" /><span id='plus'>+</span><span id='minus'>-</span>
</p>
<p id="para1">
<strong><em>text text text text</em></strong>
</p>
</div>

I added a solution that removes the javascript and css from your html. I also changed your expand/collapse element to a div instead of input. I've added a span element within the div that changes it's text content (either + or -) based on whether #para1 is displayed or not. Also, in css I added display: none; to #para1 (this initially hides the element), cursor: pointer; (shows it is clickable when the user hovers over it) user-select: none; (stop div from highlighting when user clicks on it).
// store elements
var expandEl = document.getElementById("expand");
var plusMinusEl = document.getElementById("plusMinus");
var para1El = document.getElementById("para1");
// toggle function: pass element as argument
function toggleMe(el) {
// check if element is hidden
if(el.offsetParent === null) {
plusMinusEl.textContent = "-";
el.style.display = "block"
}
else {
plusMinusEl.textContent = "+";
el.style.display = "none"
}
}
// click function for expand div
expandEl.addEventListener("click", function() {toggleMe(para1El)});
#expand {
font-size:18px;
color:#008080;
cursor: pointer;
user-select: none; /* stop div from highlighting */
}
#para1 {
display: none;
}
<div id="expand">
LINK TO EXPAND <span id="plusMinus">+</span>
</div>
<p id="para1"><strong><em>text text text text</em></strong></p>

Javascript onclick needs 2 clicks

Each div is shown only after 2 clicks at the start.After 2 initial clicks on each div, each div showhide works with just 1 click. Javascript and html
function showhide() {
var div = document.getElementsByClassName('search_form')[0];
if (div.style.display == "none") {
div.style.display = "block";
} else {
div.style.display = "none";
}
}
function showhide2() {
var div = document.getElementsByClassName('login')[0];
if (div.style.display == "none") {
div.style.display = "block";
} else {
div.style.display = "none";
}
}
function showhide3() {
var div = document.getElementsByClassName('carrello')[0];
if (div.style.display == "none") {
div.style.display = "block";
} else {
div.style.display = "none";
}
}
.search_form {
display: none;
float: right;
}
.login {
display: none;
float: right;
}
.carrello {
display: none;
float: right;
}
<div class="login-carrello">
<img src="img.png" onClick="showhide();" onmouseover="this.src='img.png'" onmouseout="this.src='gg.png'" width="50px" height="50px"> &nbsp &nbsp
<img src="img.png" onClick="showhide2()" onmouseover="this.src='img.png'" onmouseout="this.src='img.png'" width="50px" height="50px">
<img src="imgt.png" onClick="showhide3()" onmouseover="this.src='img.png'" onmouseout="this.src='img.png'" width="50px" height="50px">
</div>
are both in a single PHP page.Thanks in advance.

The problem is in JavaScript code. Since display property was initially set in css, div.style.display won't give you none. So, you have to change your code a little bit. Like this:
if(div.style.display != "block")
div.style.display = "block";
else
div.style.display = "none";
Once you set the display property using JavaScript code, you can read it using JavaScript.

Because the display property is not actually set (although it is applied through CSS), it's initial value is empty (and thus not equal to 'none' ).
If checked in the reverse order, it would work, but perhaps safer is to use an extra class (with the display property) you toggle instead.
A minimized example:
function showhide(cn) {
var div = document.getElementsByClassName(cn)[0];
div.classList.toggle('show');
}
.login-carrello >img{
width:50px;
height: 50px;
}
.search_form,.login, .carrello {
float: right;
display: none;
}
.show{
display:block;
}
<div class="login-carrello">
<img src="/wp-content/themes/kyro/img/search.png" onClick="showhide('search_form')">
<img src="img.png" onClick="showhide('login')">
<img src="imgt.png" onClick="showhide('carrello')">
</div>
<div class="search_form">search_form</div>
<div class="login">login</div>
<div class="carrello">carrello</div>
The start setting for .search_form,.login, .carrello is display:none, but adding .show overrides that. (I've also taken the liberty of parameterizing the classname to show/hide so only a single function is needed. With late binding it could be automated further, but this stays pretty close to the original)

Not sure if you're looking for a double click, or just two seperate clicks. However if a double click would satisfy your functionality requirement, you could try something like the following:
<img src="img.png" ondblclick="showhide2()" onmouseover="this.src='img.png'" mouseout="this.src='img.png'" width="50px" height="50px">

Toggle OnClick to dynamically change CSS

I have a button to show and hide certain part by calling CSS stylesheet change with onClick button. I want the same onclick to toggle in between hide and show. And it is hiding the content with .HeaderContainer {display:none;} but can I get help how to toggle it ?
I want same button if click again then it should override the .HeaderContainer with just {} ;
I have made the code like this to hide. I need how the same button can show this again.
<script type="text/javascript">
function loadToggleAction() {
var sheet = document.createElement('style')
sheet.innerHTML = ".HeaderContainer {display:none;}";
document.body.appendChild(sheet);
}
</script>
<form>
<input type="button" id="dxp" class="button" value="Hide top Pane" onclick='javascript: loadToggleAction();' />
</form>

You could do it like this:
var isHidden = false;
function loadToggleAction() {
var sheet = document.createElement('style')
if(!isHidden){
sheet.innerHTML = ".HeaderContainer {display:none;}";
}else{
sheet.innerHTML = ".HeaderContainer {display:block;}";
}
document.body.appendChild(sheet);
isHidden = !isHidden; //This will change the value to the opposite
}
Or like I would to it:
var isHidden = false;
function toggleVisibility() {
var div = document.getElementsByClassName("test")[0];
if(!isHidden){
div.style.display = "none";
}else{
div.style.display = "block";
}
isHidden = !isHidden;
}
.test {
display: block;
width: 100px;
height: 100px;
background: #ff0000;
}
<div class="test"></div>
<button onclick="toggleVisibility()">Click me</button>