✔ Div bei klick ausbelnden

[hummeldumm]

Hallo,

ich habe folgende Funktion auf meiner hp eingebaut:

<script language="javascript" type="text/javascript">
<!--

function toggleMe(a) {

var ID = 1; // Anzahl der "divs" eintragen

for (var zaehler = 1; zaehler <= ID; zaehler++) {
if (document.getElementById("more" + zaehler).style.display == "block")
{document.getElementById("more" + zaehler).style.display="none";
}
}

var e=document.getElementById(a);
if(!e)return true;
if(e.style.display=="none"){
e.style.display="block"
} else {
e.style.display="none"
}
return true;
}

//-->
</script>

<a onclick="return toggleMe('more1')" href="javascript:void(0)" >
» weitere Informationen
</a>
<div id="more1" style="display:none">
text text text text ...
</div>

Ich möchte, dass der Link"» weitere Informationen" nach dem Klicken verschwindet. Außerdem soll das div-Element (z.B. id=1) sich etwas langsamer öffen.

Hat jemand dazu eine Idee?

Besten Dank

 

[THEJS]

Wenn du den Text formatierst, würde ich dir weiterhelfen! (BB-Code)

greez
THEJS

 

[hummeldumm]

Hallo, danke für dein Angebot. Die div-Container habe ich per css formatiert.

 

[chmee]

*grummel* Man bittet Dich, den oben eingefügten Code in eine lesbare Form zu bringen und mit dem code-Tag zu belegen. Abgesehen davon, ich gehöre zu den JS-Faulen und nutze bei quasi jeder Möglichkeit jQuery, wo beide Fragen mit jeweils einer Zeile geklärt sind.

mfg chmee

 

[THEJS]

Nein, du sollst deinen Post formatieren mit BB-Codes!

// So zum Beispiel

 

[hummeldumm]

sorry, aber ich kapiers nicht. Soll ich vor jeder Zeile // einfügen? Mir sagt das gar nichts. Sorry nochmal.

 

[chmee]

Du gehst beim Posten auf Erweitert, markierst den Code und drückst im Menu zB die Raute (3. von Rechts) für das Code-Tag.

mfg chmee

 

[hummeldumm]

so****

<script language="javascript" type="text/javascript">
<!--

function toggleMe(a) {

var ID = 1; // Anzahl der "divs" eintragen

for (var zaehler = 1; zaehler <= ID; zaehler++) {
if (document.getElementById("more" + zaehler).style.display == "block")
{document.getElementById("more" + zaehler).style.display="none";
}
}

var e=document.getElementById(a);
if(!e)return true;
if(e.style.display=="none"){
e.style.display="block"
} else {
e.style.display="none"
}
return true;
}

//-->
</script>

<a onclick="return toggleMe('more1')" href="javascript:void(0)" >
» weitere Informationen
</a>
<div id="more1" style="display:none">
text text text text ...
</div>

 

[THEJS]

Einrückungen wären noch schön, aber nja, lassen wir das mal gelten!

Also:
Wie chmee schon erwähnt hat, würde ich das auch mit JQuery machen.

// vorher die JQuery-Library einbinden

// Dann:
<script type="text/javascript">
    $(document).ready(function(){
      $("a").click(function(event){
        event.preventDefault();
        $("#more1").show("slow");
        $(this).hide("slow");
      });
    });
</script>

// und im Body:

  <a href="#">
  » weitere Informationen
  </a>
  <div id="more1" style="display:none">
  text text text text ...
  </div>

greez
THEJS

PS: Du kannst dir auch vor dem Antworten eine Vorschau deines Geschriebenen anzeigen lassen!

 

[hummeldumm]

Danke, das geht ja schon in die von mir gewünschte Richtung. Aber wie bekomme ich es hin, dass beim Klick auf das Nächste " » weitere Informationen " das angezeigte div-Element sich schließt, der dazugehörige Link wieder angezeigt wird und das gleiche "Spiel" bei dem neuen Link funktioniert?