# Div mit toggle ein- und ausblenden - wie automatisch ausblenden?



## Utzi (16. Februar 2013)

Hallo zusammen,
ich habe das Thema zwar schon einmal im Forum gefunden, allerdings keine Antwort auf meine Frage. Deshalb bitte ich euch um Hilfe:
Ich habe auf einer Webseite eine Unternavigattion eingefügt, bei der sich durch Klick auf den Navi-Punkt mit dem Befehl "Toggle" ein Div öffnet in dem die Unterpunkte erscheinen. Leider bleibt das Div jedoch so lange stehen, bis man wieder auf den Navipunkt klickt...es kann also sein, dass irgendwann für jeden Navipunkt ein Div geöffnet ist - ist natürlich nicht Sinn der Sache.
Gibt es eine Möglichkeit, das Div wieder zu schließen, sobald ein anderer Punkt aufgerufen wird bzw. noch lieber, sobald man mit der Maus das Div verlässt? Hättet ihr hier eine Lösung für mich? Ich wäre euch sehr dankbar!

Mein Script:

```
<script language="JavaScript" type="text/javascript"> 
<!-- 
function toggleDiv(element){ 
 if(document.getElementById(element).style.display == 'none') 
  document.getElementById(element).style.display = 'block'; 
 else
       document.getElementById(element).style.display = 'none'; 
} 
//--> 
</script>
```
und


```
<a href="javascript:toggleDiv('toggle');" title="klick mich" style="display:block; ">
<img src="http://www.tutorials.de/images/navi/unternehmen.jpg" name="unternehmen" width="131" height="33" border="0" id="unternehmen" onMouseOver="MM_swapImage('unternehmen','','images/navi/unternehmen_over.jpg',1)" onMouseOut="MM_swapImgRestore()">
</a>
```


----------



## Jan-Frederik Stieler (16. Februar 2013)

Hallo,
du könntest dies natürlich über einen Hover realisieren oder eben überprüfen ob in der Dom des Menüs ein  weiteres Element display:block besitzt.
Leider habe ich mit traditionellem JS so meine Probleme und könnte dir hier eher mit jQuery weiterhelfen.

Viele Grüße


----------



## Utzi (17. Februar 2013)

Hal Jan-Frederik,
danke für deine Antwort. Habe mit JQuery noch nie gearbeitet. Könntest du mir hier ein paar Tips geben, wie ich meinen Wunsch realisieren könnte?
Gruß
Ützi


----------



## Cappaja (19. Februar 2013)

Hallo Ützi,

hab grad zufällig so etwas gemacht  Hier ein minimalistisches Beispiel...

HTML-Code:

```
<div class="menu">
    <ul>
        <li>
            <a href="#">Menu 1</a>
            <ul class="submenu">
                <li><a href="#">Submenu 1.1</a></li>
                <li><a href="#">Submenu 1.2</a></li>
                <li><a href="#">Submenu 1.3</a></li>
            </ul>                     
        </li>
    </ul>
</div>
```

JQuery:

```
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
        <script type="text/javascript">
        //<![CDATA[
        $(document).ready(function(){
            $('.submenu').hide();
            $('.menu > ul > li > a').click(function() {
                $(this).next('ul').slideToggle();
            });
        });
        //]]>
        </script>
```

Die JQuery Datei musst du dir am besten auf der offiziellen Seite besorgen und dementsprechend in dein Projekt einbinden (hier "js/jquery-1.9.1.js". Das Hiding für das Submenu kannst du auch via CSS über display: none; setzen, wie es einem beliebt...

Grüße Cappaja


----------



## FirstLion (20. Februar 2013)

Also wenn du kein Bock auf jQuery hast kannst es auch so ungefähr lösen:

Javascript:

```
function toggle(menuePunkt, methode) {
       if(methode == "ein") {
           document.getElementById(menuePunkt).style.display = 'block';
       }

       if(methode == "aus") {
           document.getElementById(menuePunkt).style.display = 'none';
       }
}
```
So könntest du das Ganze dann in HTML benutzen .. ist nur nen Beispiel mit nen par div'
HTML:


```
<div onclick="toggle('DeinDivName1', 'ein');" onmouseout="toggle('DeinDivName1', 'aus');">
 <div id="DeinDivName1">hier dann die menüpunkte rein die sich aufklappen</div>
 </div>
 <div onclick="toggle('DeinDivName2', 'ein');" onmouseout="toggle('DeinDivName2', 'aus');">
 <div id="DeinDivName2">hier dann die menüpunkte rein die sich aufklappen </div>
 </div>
```
Wenn dir was unklar ist frag einfach... achso ist nicht getestet nur kurz runter getippt (keine Garantie ob kein Fehler drin ist) (;
MfG Lion


----------



## Gast170816 (27. Mai 2014)

Hallo,
ich benötige kurzfristig auch mal so ein aufklappbares div, weil ich viel (nebensächliche) Inhalte habe, die erst auf Wunsch/Klick kommen sollen.

Ich habe gesucht und die gefundenen Codeschnipsel schnell formlos in ein HTML-Dokument getan... nun funktionieren aber die Beispiele (zwei) nicht.

Das erste ist was, was mit den verlinkten jQuery-Paket funktionieren sollte (die Linkschreibweise stimmt doch oder?!) und das zweite ist das von hier aus dem Thread (das braucht ja gar keine verlinkte Bibliothek dazu, oder?!).

Wie mach ich also dass es funktionert?

```
<--! Das erste Beispiel -->
<style>
.info-div{
  width: 750px;
  height: 100px;
  background: red;
  color: white;
  display: none;
}
</style>



<script src="http://code.jquery.com/jquery-latest.min.js"
  type="text/javascript"></script>
<a href="javascript:void(0)" id="wd-click">Extras einblenden/ausblenden</a>

<div class="info-div" id="wd-info">THIS IS THE TOGGLE DIV</div>

<script>
jQuery.noConflict()
jQuery(document).ready(function(){
  (function($){
   $('#wd-click').click(function(){
     $('#wd-info').slideToggle();
  });
  })(jQuery);
});
</script>


<--! Das zweite Beispiel -->
<div onclick="toggle('DeinDivName1', 'ein');" onmouseout="toggle('DeinDivName1', 'aus');">
<div id="DeinDivName1">hier dann die menüpunkte rein die sich aufklappen</div>
</div>

<script>
function toggle(menuePunkt, methode) {
  if(methode == "ein") {
  document.getElementById(menuePunkt).style.display = 'block';
  }
  if(methode == "aus") {
  document.getElementById(menuePunkt).style.display = 'none';
  }
}</script>
```


----------



## Quaese (28. Mai 2014)

Hi,

du willst das DIV mit der ID *info-div* sliden lassen. Damit muss das Element, auf dem die *slideToggle*-Methode ausgeführt wird diese ID als Selektor erhalten.

```
jQuery(document).ready(function(){
    (function($){
        $('#wd-click').click(function(evt){
            evt.preventDefault();
            $('#wd-info').slideToggle();
        });
    })(jQuery);
});
```
Desweiteren kannst du dir die *javascript*-Anweisung im *href*-Attribut ersparen und stattdessen innerhalb des Eventhandlers mit *preventDefault* das Standardverhalten unterbinden.

Ciao
Quaese


----------



## SpiceLab (28. Mai 2014)

Fantasmo hat gesagt.:


> nun funktionieren aber die Beispiele (zwei) nicht.


Das erste (jQuery-)Script funktioniert auf Anhieb tadellos, und beim zweiten muß lediglich der zuletzt genannte *</div>*-Tag an der richtigen Stelle notiert werden.

@Quaese: Der ID-Bezeichner ist richtig benannt. Du hast ihn lediglich mit der Klasse vertauscht


----------



## Quaese (28. Mai 2014)

@spicelab - danke für den Hinweis, ich habe es geändert ... das kommt davon, wenn man vor dem Aufstehen schon antwortet ;-)


----------



## Gast170816 (29. Mai 2014)

spicelab hat gesagt.:


> Das erste (jQuery-)Script funktioniert auf Anhieb tadellos,


Echt? Also bei mir slidete da nix... und die jQuery-Bibliothek ist doch schon richtig verlinkt?!. 
Ich hab so nen Scriptblocker, der aber deaktiviert ist...liegt's daran? Ich muss das nochmal probieren...


----------



## SpiceLab (29. Mai 2014)

Fantasmo hat gesagt.:


> Echt? Also bei mir slidete da nix... und die jQuery-Bibliothek ist doch schon richtig verlinkt?!.
> Ich hab so nen Scriptblocker, der aber deaktiviert ist...liegt's daran? Ich muss das nochmal probieren...


Mach' das mal, denn die jQuery-Library wird in deinem gezeigten Code korrekt geladen.


----------

