Pyrofunto Pyrofunto - 6 months ago 29
CSS Question

Troubleshooting button need double click to work when first launched

I have made this code that hides or shows part of the text when you click on a button. However when you first launch the page you need to click two times on the button for it to work. It is only when you first try at the launching of the page because once you have clicked twice you will only need to click once each time like you normally should. Does anyone have any idea on why this is?

Here is my code:



#myDIV {
width: 200px;
background-color:#333;
color:#fff;
display:none;
padding:0;
margin:0;
}

#myDIV2 {
width: 200px;
background-color:#333;
color:#fff;
display:none;
}

#arrow{
height:10px;
width:10px;
}

#ok{
height:20px;
width:20px;
}

#button{
background-color:#333;
color:#fff;
width:250px;
empty-cells:hide;
}

table,tr,td{
border:2px solid black;
border-collapse:collapse;
}

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Slides Checkbox</title>
<link rel="stylesheet" href="style.css">
<script src="js/jquery.js"></script>
<script src="js/jquery-3.2.1.js"></script>

<script>
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "none") {
x.style.display = "block";
}
else {
x.style.display = "none";
}
};
function myFunction2() {
var x = document.getElementById("myDIV2");
if (x.style.display === "none") {
x.style.display = "block";
}
else {
x.style.display = "none";
}
};
</script>
</head>
<body>
<table id="button">
<tr>
<td><button onclick="myFunction()"><img src="img/arrow.png" id="arrow"></button>
Première liste:</td>
</tr>
<tr>
<td><div id="myDIV">
<ul>
<li>1er item</li>
<li>2eme item</li>
<li>3eme item</li>
</ul>
</div></td>
</tr>
<tr>
<td><button onclick="myFunction2()"><img src="img/arrow.png" id="arrow"></button>
Deuxième liste:</td>
</tr>
<tr>
<td><div id="myDIV2">
<ul>
<li>1er item</li>
<li>2eme item</li>
<li>3eme item</li>
</ul>
</div></td>
</tr>
</table>
<img src="img/ok.png" id="ok">
</body>
</html>




Answer Source

I swapped the if statement around to fix the issue

function myFunction(e) {       			
   var x = document.getElementById("myDIV");
   if (x.style.display === "block") {
           x.style.display = "none";
   } else {
           x.style.display = "block";
   }
}

function myFunction2() {
    var x = document.getElementById("myDIV2");
    if (x.style.display === "block") {
    	x.style.display = "none";
    } else {
    	x.style.display = "block";
    }
}
#myDIV {
    width: 200px;
    background-color:#333;
    color:#fff;
    padding:0;
    margin:0;
    display: none;
}
#myDIV2 {
    width: 200px;
    background-color:#333;
    color:#fff;
    display: none;
}
#arrow{
    height:10px;
    width:10px;
}
#ok{
    height:20px;
    width:20px;
}
#button{
	background-color:#333;
	color:#fff;
	width:250px;
	empty-cells:hide;
}
table,tr,td{
	border:2px solid black;
	border-collapse:collapse;
}
<table id="button">
<tr>
<td><button onclick="myFunction()"><img src="img/arrow.png" id="arrow"></button>Première liste:</td>
</tr>
<tr>
   <td>
      <div id="myDIV">
      <ul>
      <li>1er item</li>
      <li>2eme item</li>
      <li>3eme item</li>
      </ul>
      </div>
   </td>
</tr>
<tr>
<td><button onclick="myFunction2()"><img src="img/arrow.png" id="arrow"></button>Deuxième liste:</td>
</tr>
<tr>
<td>
   <div id="myDIV2">
   <ul>
      <li>1er item</li>
      <li>2eme item</li>
      <li>3eme item</li>
   </ul>
   </div>
</td>
</tr>
</table>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download