Nospiežot pogu kāds elements var tikt paslēpts, bet var arī tikt parādīts. To var izdarīt izmantojot vienu paša definētu funkciju, papildus izmantojot if nosacījumu.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button id="poga">Aizvērt noteikumus</button>
<div id="noteikumi">
<ul>
<li>Piedalīties stundas darbā</li>
<li>Ievērot skolotāja norādījumus</li>
<li>Netraucēt stundu skaļi sarunājoties</li>
<li>Nekavēt stundas sākumu</li>
</ul>
</div>
<script>
let poga = document.getElementById('poga');
let noteikumi = document.getElementById('noteikumi');
poga.onclick = toggle;
function toggle() {
if (noteikumi.style.display === "none") {
noteikumi.style.display = "block";
poga.innerHTML = 'Aizvērt noteikumus';
} else {
noteikumi.style.display = "none";
poga.innerHTML = 'Atvērt noteikumus';
}
}
</script>
</body>
</html>