Öppna en dold DIV med en knapp, samtidigt stänga de andra?

Trädvy Permalänk
Medlem
Plats
65 14
Registrerad
Dec 2001

Öppna en dold DIV med en knapp, samtidigt stänga de andra?

Lite sent och det snurrar..

Detta är min kod

<script> // JavaScript Document function toggle_visibility(id) { var e = document.getElementById(id); if(e.style.display == 'block') e.style.display = 'none'; else e.style.display = 'block'; } </script>

<a onclick=toggle_visibility('träning');>Träning ›</a> <a onclick=toggle_visibility('licenser');>Licenser ›</a> <div class="hidden_sidebar" id="träning"> Text information. </div> <div class="hidden_sidebar" id="licenser"> Text information. </div>

Fungerar ju bra med en dold meny, men de lägger ju sig över varandra, vill att "träning" ska stängas när "licenser" öppnas och tvärtom.

Samsung 34'' ultrawide curved
Logitech MX master & Logitech g910
Creative SoundBlaster Katana

Trädvy Permalänk
Medlem
Plats
127.0.0.1
Registrerad
Apr 2010
Skrivet av downup:

Lite sent och det snurrar..

Detta är min kod

<script> // JavaScript Document function toggle_visibility(id) { var e = document.getElementById(id); if(e.style.display == 'block') e.style.display = 'none'; else e.style.display = 'block'; } </script>

<a onclick=toggle_visibility('träning');>Träning ›</a> <a onclick=toggle_visibility('licenser');>Licenser ›</a> <div class="hidden_sidebar" id="träning"> Text information. </div> <div class="hidden_sidebar" id="licenser"> Text information. </div>

Fungerar ju bra med en dold meny, men de lägger ju sig över varandra, vill att "träning" ska stängas när "licenser" öppnas och tvärtom.

Om du kollar din kod:

<script> // JavaScript Document function toggle_visibility(id) { var e = document.getElementById(id); if(e.style.display == 'block') e.style.display = 'none'; else e.style.display = 'block'; } </script>

så är det enda du gör är att varje gång du klickar kolla om den är synlig och inte samtidigt göra:

<script> // JavaScript Document function toggle_visibility(id) { var e = document.getElementById(id); if(e.style.display == 'block') e.style.display = 'none'; else e.style.display = 'block'; //här fattas en logik som sätter den andra till none om block är satt på den övre. } </script>

Försök lista ut koden på egen hand, funkar det inte så hjälper vi till.

Citera om du vill ha svar, hjälpte jag dig, gilla svaret!

Trädvy Permalänk
Medlem
Plats
65 14
Registrerad
Dec 2001
Skrivet av freddyfresh:

Om du kollar din kod:

<script> // JavaScript Document function toggle_visibility(id) { var e = document.getElementById(id); if(e.style.display == 'block') e.style.display = 'none'; else e.style.display = 'block'; } </script>

så är det enda du gör är att varje gång du klickar kolla om den är synlig och inte samtidigt göra:

<script> // JavaScript Document function toggle_visibility(id) { var e = document.getElementById(id); if(e.style.display == 'block') e.style.display = 'none'; else e.style.display = 'block'; //här fattas en logik som sätter den andra till none om block är satt på den övre. } </script>

Försök lista ut koden på egen hand, funkar det inte så hjälper vi till.

Fick köra dubbel gissar på att det går korta ner till 99%

<script> function switchVisible() { if (document.getElementById('träning')) { if (document.getElementById('träning').style.display == 'none') { document.getElementById('träning').style.display = 'block'; document.getElementById('utbildning').style.display = 'none'; } else { document.getElementById('träning').style.display = 'none'; } } } </script> <script> function switchVisible2() { if (document.getElementById('utbildning')) { if (document.getElementById('utbildning').style.display == 'none') { document.getElementById('utbildning').style.display = 'block'; document.getElementById('träning').style.display = 'none'; } else { document.getElementById('utbildning').style.display = 'none'; } } } </script>

Fungerar nu ;p

Samsung 34'' ultrawide curved
Logitech MX master & Logitech g910
Creative SoundBlaster Katana

Trädvy Permalänk
Medlem
Registrerad
Okt 2002

https://jsfiddle.net/4x9fvokf/

var toggle = document.getElementsByClassName('toggle'), targets = document.getElementsByClassName('foo'); toggle[0].addEventListener("click", function() { for (var i = 0; i < targets.length; i++) { targets[i].classList.toggle('hide'); } });

Så kan du lägga till så många div'ar du vill, utan att duplicera koden för varje...