Forum Mjukvara Programmering och digitalt skapande Tråd Inlägg

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

1
Skriv svar
Permalänk
Medlem ★
●

Ö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.

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
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.

Gå till inlägget

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.

Visa signatur

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

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
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.

Gå till inlägget

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

Redigera
Citera flera Citera
Permalänk
Medlem
●

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...

Redigera
Citera flera Citera
1
Skriv svar
Senaste nyheterna
Hårdvara
Mjukvara
Övrigt
Nytt i forumet
Datorkomponenter
System
Ljud, bild och kommunikation
Spel och mjukvara