I am completely new to this and I would like to know how I can make it so that when you click on one of the links only the text relating to that link is shown. So, for example, if I click Kabling and then Programmering the text about Kabling should not be displayed. I would really appreciate any feedback on everything else as well since I just started to learn HTML and CSS 3 weeks ago. To be able to post this question I need to write more text although I'm not sure what to write.
Thank you in advance
<html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Andreas</title>
<!-- styles -->
<link rel="stylesheet" href="stil.css"/>
</head>
<body>
<div class="menu">
<div class="label">menu</div>
<div class="spacer"></div>
<!-- Knappar -->
<!-- Kabling -->
<div class="item"><a onclick="myFunction1()" href="javascript:void(0);">Kabling</a></div>
<!-- Programmering -->
<div class="item"><a onclick="myFunction2()" href="javascript:void(0);">Programmering</a></div>
<!-- Konvertering -->
<div class="item"><a onclick="myFunction3()" href="javascript:void(0);">Konvertering</a></div>
<!-- Bildbehandling -->
<div class="item"><a onclick="myFunction4()" href="javascript:void(0);">Bildbehandling</a></div>
<!-- Chrome devtools -->
<div class="item"><a onclick="myFunction5()" href="javascript:void(0);">Chrome Devtools</a></div>
<!-- Ellära -->
<div class="item"><a onclick="myFunction6()" href="javascript:void(0);">Ellära</a></div>
<!-- -->
<img src="" alt="">
</div>
<!-- Content -->
<!-- Kabling Text -->
<br>
<div id="KablingText"style="display:none;">
<font size="+3">Sette opp nettverk</font>
<br><br>
<img class="subjimg" src="images/kabling.jpg">
<div class="subjtxt">Trekke kabler i veggkanal å sette på ethernetkontakt på kat 6 kabel.
Hva et patchpanel, svitj og etasjefordeler er. Anext (elektromagnetisk støy), Separasjon mellom starkstrømkabel og tele/datakabel SxP=A.Nek 700 regelbok
Cenelec Ekomloven. Strukturert kabling Fiber Potens Likstrøm og væxelstrøm Sinuskurva.
Diagonalrevolvert kabel. Slaglengde.Bølgelengde λ Multiplikatorer – atto – exa I=Strøm, Itensitè courant
</div>
</div>
<!-- Programmering Text -->
<div id="Programmering"style="display:none;">
<h2>Om programmering</h2>
<br>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa porro ducimus animi! Nisi, temporibus? Iure, doloremque quisquam eveniet, nesciunt, unde culpa recusandae inventore voluptates ipsum esse veritatis eius magni rem?
</div>
<!-- Konvertering Text -->
<div id="Konvertering"style="display:none;">
Binære tall og hvordan man regner med dem. Mega=miljon=1x106
Giga=miljard=1x109. Hz svingninger pes sek, Høy frekvens har dårligere rekkevidde lav frekvens har bedre rekkevidde.
</div>
<!-- Bildbehandling Text -->
<div id="Bildbehandling"style="display:none;">
Text om Bildbehandling
</div>
<!-- Chrome Devtools Text -->
<div id="ChromeDevtools"style="display:none;">
Text om Chrome Devtools
</div>
<!-- Ellära Text -->
<div id="Ellära"style="display:none;">
Text om Ellära
</div>
</div>
<!--JS För knapp 1 -->
<script>
function myFunction1() {
var x = document.getElementById('KablingText');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
</script>
<!--JS För knapp 2 -->
<script>
function myFunction2() {
var x = document.getElementById('Programmering');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
</script>
<!--JS För knapp 3 -->
<script>
function myFunction3() {
var x = document.getElementById('Konvertering');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
</script>
<!--JS För knapp 4 -->
<script>
function myFunction4() {
var x = document.getElementById('Bildbehandling');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
</script>
<!--JS För knapp 5 -->
<script>
function myFunction5() {
var x = document.getElementById('ChromeDevtools');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
</script>
<!--JS För knapp 6 -->
<script>
function myFunction6() {
var x = document.getElementById('Ellära');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
</script>
</body
</html>```