DIVs ein- und ausblenden.

wpnassforsch

Hi!

Durch folgendes Script lasse ich mir verschiedene DIVs wie PopUps ein- und ausblenden:

Code

<script type="text/javascript">
var angeschaltet = 0;
function anzeigen(das){
 if(angeschaltet != 0)
  document.getElementById(angeschaltet).style.display='none';
 if(document.getElementById(das).style.display=='none')
  document.getElementById(das).style.display='block';
 else
  document.getElementById(das).style.display='none';
 angeschaltet= das;
}
</script>

Alles anzeigen

Allerdings führt das dazu, dass das zuletzt geöffnete DIV geöffnet bleibt.
Ich suche nach einer Möglichkeit, die DIVs zu schließen. Am liebsten bei Klick auf "alles außer das DIV", sprich den Hintergrund, den Rest der Seite.

Kann mir da jemand auf die schnelle helfen?

Besten Dank vorab!

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

MiH

Code

function hide($show_id){
 $divs = document.getElementsByTagName('div');
 for(a=0;a<$divs.length;a++){  
  if($divs[a].getAttribute('id') == $show_id){
   $divs[a].style.display = 'block';
  }else{
   $divs[a].style.display = 'none';
  }
 }
}
</script>

Alles anzeigen

Die Funktion versteckt nur die Elemente außer die gewünschte ID. Wenn due wieder alle zeigen möchtest, machst du dir eine show-Funktion.
Aufruf:

Code

hide('meine_id');

tobee

Ich habe eine Liste und benutze dafür jQuery:

Code

var items = $('ul.items li a');
    items.click(function() {
        var li = $(this).closest('li'), ul = li.closest('ul');
        if(li.hasClass('selected')) {
            li.removeClass('selected');
        }
        else {
            ul.find('li').removeClass('selected');
            li.addClass('selected');
        } 
    });

Alles anzeigen

wpnassforsch

Zitat von MiH
Code
function hide($show_id){
 $divs = document.getElementsByTagName('div');
 for(a=0;a<$divs.length;a++){  
  if($divs[a].getAttribute('id') == $show_id){
   $divs[a].style.display = 'block';
  }else{
   $divs[a].style.display = 'none';
  }
 }
}
</script>
Alles anzeigen
Die Funktion versteckt nur die Elemente außer die gewünschte ID. Wenn due wieder alle zeigen möchtest, machst du dir eine show-Funktion.
Aufruf:
Code
hide('meine_id');

Hmm.
Danke erstmal.
Aber wenn ich das Script in den Header kopiere, und dann zusätzlich zu meinem "anzeige" Sript auf onklick deine "hide" funktion ausführe schließt er mir alle DIVs. Also wirklich alles. Ich habe dann nur noch einen grauen Bildschirm.

Ich glaube ich habe mich missverständlich ausgedrückt.
Ich suche eine Möglichkeit, die DIVS wieder zu schließen.
Perfekt wäre alle auf einmal. Einzeln würde aber auch reichen.

Ich habe gedacht mit deiner Funktion würde es reichen folgendes zu setzen:

Code

<div class="textbox_head">Atemwege <a href="javascript:void(0);" onclick="hide('textbox_atemwege')">(schliessen)</a></div>

Aber dann schließt er mir alle DIVs. Sprich die ganze Seite verabschiedet sich.

Danke für die Geduld und Hilfe!!!

MiH

Zitat von wpnassforsch

Ich suche eine Möglichkeit, die DIVS wieder zu schließen.
Perfekt wäre alle auf einmal.

Das hast du ja bereits.

Ansonsten für einzelne:

Code

function hide($id){
 $div = document.getElementById($id);
 $div.style.display = 'none';
}


function show($id){
 $div = document.getElementById($id);
 $div.style.display = 'block';
}


Aufruf:
<div id="asdasd">TEXT</div>
<a href="#" onclick="hide('asdasd')">Ciao</a>
<a href="#" onclick="show('asdasd')">Hallo</a>

Alles anzeigen

wpnassforsch

Ich muss jetzt wirklich mal ein Lob aussprechen.
Trotz dessen, dass ich immer nur mit Fragmenten von Fragen komme antwortet ihr mir beständig - und (das beste): sehr gut.

Es klappt hervorragend.

Mein Code in der header.php sieht jetzt so aus:

Code

<script type="text/javascript">
var angeschaltet = 0;
function anzeigen(das){
 if(angeschaltet != 0)
  document.getElementById(angeschaltet).style.display='none';
 if(document.getElementById(das).style.display=='none')
  document.getElementById(das).style.display='block';
 else
  document.getElementById(das).style.display='none';
 angeschaltet= das;
}






function hide($id){
 $div = document.getElementById($id);
 $div.style.display = 'none';
}


function show($id){
 $div = document.getElementById($id);
 $div.style.display = 'block';
}


</script>

Alles anzeigen

Ich kann DIVs "switchen" und bei Bedarf wieder manuell schließen.

Jetzt eine Luxusfrage:
Wie schaffe ich es, dass bei öffnen der Seite ein bestimmter DIV bereits geöffnet ist. Ich nahm an, dass ich einfach display:block setze. Dann wird der DIV zwar geöffnet angezeigt, allerdings schließt er sich nicht, wenn ich einen anderen öffne. Das switchen funktioniert dann nicht mehr.

Meine Anschlussfrage wäre:
Ich öffne die DIVs per Hover-Buttons. Ich hätte es gerne so, dass der entsprechende Button bei öffnen der Seite (also bei geöffnetem DIV) auch im Zustand active dargestellt wird. Ist das auch per Javascript zu realisieren oder geht das einfacher?

Anbei mal der Code der entsprechenden Elemente:

PHP

<div id="figur">


                         <div id="navi_atemwege"><a href="javascript:void(0);" onclick="anzeigen('textbox_atemwege')"></a>
                         </div>


                         <div id="navi_bauch"><a href="javascript:void(0);" onclick="anzeigen('textbox_bauch')"></a>
                         </div>


                         <div id="navi_herz"><a href="javascript:void(0);" onclick="anzeigen('textbox_herz')"></a>
                         </div>


                         <div id="textbox_atemwege" style="display: none;">


                                 <div class="textbox_head">Atemwege <a href="javascript:void(0);" onclick="hide('textbox_atemwege')"><span style="font-size:10px;"> (Schlie&szlig;en)</span></a></div>
                                 <div class="textbox_content">
                                         <?php $lastposts = get_posts('category=27');
                                         foreach($lastposts as $post) :
                                         setup_postdata($post);
                                         ?>
                                         <ul2><li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li></ul2>


                                         <?php
                                         endforeach; ?><br>
                                 </div>
                         </div>


                         <div id="textbox_herz" style="display: none;">


                                 <div class="textbox_head">Herz <a href="javascript:void(0);" onclick="hide('textbox_herz')"><span style="font-size:10px;"> (Schlie&szlig;en)</span></a></div>
                                 <div class="textbox_content">
                                         <?php $lastposts = get_posts('category=29');
                                         foreach($lastposts as $post) :
                                         setup_postdata($post);
                                         ?>
                                         <ul2><li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li></ul2>


                                         <?php
                                         endforeach; ?><br>
                                 </div>
                         </div>


                                 <div id="textbox_bauch" style="display: none;">


                                 <div class="textbox_head">Bauch <a href="javascript:void(0);" onclick="hide('textbox_bauch')"><span style="font-size:10px;">(Schlie&szlig;en)</span></a></div>
                                 <div class="textbox_content">
                                         <?php $lastposts = get_posts('category=28');
                                         foreach($lastposts as $post) :
                                         setup_postdata($post);
                                         ?>
                                         <ul2><li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li></ul2>


                                         <?php
                                         endforeach; ?><br>
                                 </div>
                         </div>

Alles anzeigen

Mit den allerbesten Grüßen!!!

PS: Ich werde mir Javascript definitiv genauer ansehen, aber ich stehe im Moment ein wenig unter Zeitdruck.

MiH

In dem du Folgendes änderst:

Code

<body onLoad="show('zeig_dich_div')">

Deine Funktion function anzeigen(das) brauchst du doch gar nicht mehr und kannst sie löschen.

Bei den ganzen JS-Sachen solltest du aber auch bedenken, dass die Seite ohne Javascript auch laufen sollte.

wpnassforsch

Hi MiH!

Ich bin begeistert, wie du mir hilfst, aber:
Wenn ich die Funktion "anzeigen" lösche und nur mit show/hide arbeite, dann muss ich die geöffneten DIVs manuell schließen. Mit der Fuktion "anzeigen" schloss sich bei öffnen eines DIV das zuletzt geöffnete automatisch. Und so hätte ich das gerne. So, dass immer nur ein DIV gleichzeitig offen ist.

Wenn Du mal in der Nähe Bielefeld bist haste Kaffe und Kekse bei mir sicher ;)

Gruß!

Willkommen! Melden Sie sich an oder registrieren Sie sich.

DIVs ein- und ausblenden.

Jetzt mitmachen!