Wieder unlogisch: Element bei Klick ändern

[Max T.]

Hallo zusammen,
ich stehe wieder vor einem eigentlich total simplen und unlogischem Problem: Beim Klick auf ein Element soll sich ein anderes Element einblenden, beim erneuten Klick wieder ausblenden. Habe das jetzt mal soweit gelöst:

function einblenden(id) {
  e = document.getElementById(id);
   if (e.style.display = "none")
   { 
    e.style.display = "block";
    } else {
    e.style.display = "none";
   }
 }

Dazu:

<div  onclick="einblenden(1)" >
 [...]
</div>

So, beim draufklicken auf das Div wird zwar Element#1 eingeblendet, aber beim erneutem Klick auf das Div nicht mehr ausgeblendet. Was mache ich falsch? :???:

VG

 

[Eric.Goerens]

du hast ja keine If abfrage gemacht wenn das Element angezeigt wird nur if (e.style.display = "none")

 

[Cheffchen]

hallö,

also einfach in der if nicht = sondern ==, soll ja ein Vergleich sein.
sonst kann ich nichts zum Code sagen da ich immer jquery nutze.

cheffchen

 

[Max T.]

Vielen dank euch beiden, das zweite "=" hat gefehlt. ;)
Jetzt fehlt mir nur noch, wie ich es hinkriege, dass

<div onclick="einblenden(1)" > Einblenden</div>
zu

<div onclick="einblenden(1)" > Ausblenden</div>
wird :?: :???:

Kann mir da auch wer helfen, weil eigentlich habe ich nie was mit JS zu tun gehabt..
VG

 

[Cheffchen]

Hallo,

wie gesagt jquery sind das 2 zeilen
.toggle() | jQuery API Documentation

Damit macht auch ein klick 2 sachen ein und ausblenden abwechselnd.

oder suchst mehr sowas wie FAQ oder für was auch immer. is halt schwer mit den paar infos
Simple jQuery Accordion – Norman's Blog

Cheffchen

 

[Max T.]

Hallo,
danke für die Antwort, bloß habe ich jetzt eine allgemeine, dumme Frage: Wie funktioniert das mit dem "jQuery"? Das einzige, was ich von jQuery seit einiger Zeit verwende, ist die "Lightbox". Da war auf der Webseite auch eine logische Erklärung wie man das einbindet. Nur jetzt lese ich manchmal, man "müsse das auf dem Server installieren", "die zehn Zeilen reichen",... . Wie ist das nun, was muss ich vorher in meine Webseite einbinden/was muss ich vorher machen, damit ich diese ganzen tollen Sachen auch selbst verwenden kann?
Habt schonmal vielen Dank! :???:
lG

 

[Tronjer]

[COLOR=#007000][FONT=Droid Sans Mono]<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>[/FONT][/COLOR]

Im Head einbinden und loslegen. Vorher musst du es natürlich noch lernen, aber dafür gibt es etliche Tutorials im Netz.

 

[pdflocker]

Kannst auch einfach dem Text in der div abändern.

<div id="test" onClick="einblenden(1);"> Einblenden </div>


function einblenden(id) {   
var e = document.getElementById(id),
      clickDiv = document.getElementById("test");
   if (e.style.display == "none") {       
     e.style.display = "block";
     clickDiv.innerHTML = "Ausblenden";    
   } else {      
     e.style.display = "none";
     clickDiv.innerHTML = "Einblenden";    
   }  
}

 

[Max T.]

Hallo,
danke für den Link; ich hoffe man kann den kostenlos nutzen. So eine ähnliche Datei war auch im Lightbox-Paket dabei - dabei handelt es sich nicht zufällig um das selbe?
@pdflocker: Vielen Dank für den Code, er hat mir sicher eine Menge Arbeit erspart! Ich möchte jetzt noch mehrere Button dieser Art auf einer Seite verwenden - gibt es da noch eine Möglichkeit, die es erspart, 4mal die selbe Funktion mit "Test1" - "Test4" zu wiederholen?
Viele Grüße!

 

[Tronjer]

Vielen Dank für den Code, er hat mir sicher eine Menge Arbeit erspart! Ich möchte jetzt noch mehrere Button dieser Art auf einer Seite verwenden - gibt es da noch eine Möglichkeit, die es erspart, 4mal die selbe Funktion mit "Test1" - "Test4" zu wiederholen?
Viele Grüße!

Er hat dir zwar die Arbeit erspart, ein Tutorial zu lesen, aber dafür hast auch nichts verstanden. Obendrein ist diese Schreibweise völlig antiquiert. Mal angenommen, ich habe drei Divs:

<div class="toggle_me">
  <p>Text 1</p>
</div>
<div class="toggle_me">
  <p>Text 2</p>
</div>
<div class="toggle_me">
  <p>Text 3</p>
</div>

und beim Klick soll sich der darin liegende Text abwechselnd ein- und ausblenden, dann könnte man mit jQuery so etwas schreiben:

$('.toggle_me').on('click', function() {
  $(this).find('p').toggle();
});

Wichtig ist es, einen Bezug zwischen dem Element, auf dem der Eventhandler liegt und dem, welches beeinflusst werden soll, herzustellen. Im obigen Fall wäre das eine Parent-Child-Beziehung.

 

[janm]

Sonst in der vorherigen Funktion einfach einen zweiten Parameter einfügen, der die ID des Buttons hat, der geklickt wurde.

 

[Max T.]

Sonst in der vorherigen Funktion einfach einen zweiten Parameter einfügen, der die ID des Buttons hat, der geklickt wurde.

hallo,
durch Kommata getrennt, also z.B. so: clickDiv = document.getElementById("test,test2,test3,(...)"); ??