After creating a code snippet that hides or shows part of the text when a button is clicked, I noticed that upon launching the page, it requires two clicks on the button to function properly. This issue occurs only during the initial launch, as after the first two clicks, subsequent clicks work as expected with just one click. Can anyone shed light on why this might be happening?
Below is the code snippet:
#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>