<script type="text/javascript">
<!--
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
//-->
</script>Inline-Nutzung
<a href="#" onclick="toggle_visibility('foo');">Click here to toggle visibility of element #foo</a>
<div id="foo">This is foo</div>
Was ist das? … Sieht aus, als wäre es von einer Badezimmerwand irgendwo abgekratzt worden…
Wo ist die Funktionsdeklaration? Und wie wäre es mit der Verwendung von `var` zum Deklarieren lokaler Variablen?
Ich denke, es war ein schlechter Copy-Paste-Job, der sich verschlimmert hat. Habe ihn etwas überarbeitet.
Danke für die Korrektur, Chris. :)
Entschuldigen Sie, dass ich einen alten Thread kommentiere, Chris, aber das hat für mich perfekt funktioniert! Ihre Website ist äußerst hilfreich und wird sehr geschätzt!
Danke Chris!
Als Neuling in JS frage ich mich, ist es besser, die Funktion inline anzuwenden, wie im obigen Beispiel von Chris gezeigt, oder gibt es eine andere Möglichkeit, die Funktion nicht direkt inline zurückzugeben? Danke!
Das einzige Problem, das ich damit habe, ist, dass ich zweimal auf den Link klicken muss, um ihn verschwinden zu lassen.
Warum braucht das 2 Klicks? Ich bin neu in JavaScript und das macht mich wahnsinnig!
ändern
<div id="foo">Das ist Foo</div>zu
<div id="foo" style="display:none;">Beginnen Sie mit ‚none‘ statt ‚block‘, dann müssen Sie nicht zuerst zweimal klicken.
Diese Funktion funktioniert besser!
function toggle_visibility(id) {var e = document.getElementById(id);
e.style.display = ((e.style.display!='none') ? 'none' : 'block');
}
Hallo!
Danke für diesen Schnipsel und die Kommentare.
Ich bin neu in JavaScript, ich habe den Label-Link zu „Show“ geändert.
Ist es möglich, das Label zwischen „Show“ und „Close“ umzuschalten?
Danke für Ihre Aufmerksamkeit
Voreno
Ich denke, die Verwendung von `display:none` sollte vermieden werden, wenn das möglich ist. Einige Versionen von Webkit-basierten Browsern betrachten `display:none` so, als wäre das Element kein Teil des DOM mehr.
Stattdessen können Sie eine CSS-Klasse wie die folgende haben:
.hidden{
position: absolute;
left: -9999px;
top: -9999px;
visibility: hidden;
}
Nach der Verwendung von JavaScript-Code können Sie den Klassennamen hinzufügen oder entfernen, wenn Sie das Element ausblenden oder anzeigen möchten.
Der Vorteil ist, dass das Element immer im DOM vorhanden ist, aber in einem nicht sichtbaren Zustand, wenn es sich im versteckten Zustand befindet.
Sehr nützliches Code-Schnipsel. War mir sehr hilfreich. Mach weiter so
@Jayaprakash – Dies ist die korrekteste Methode, die hier beschrieben wird.
@Escrimador
Als alter Code-Experte sollten Sie sich an das Prinzip der 3 Ebenen der Trennung erinnern?
Verwenden Sie JS, um eine Klasse umzuschalten (Interaktion), und lassen Sie CSS die visuelle Arbeit erledigen.
Ich persönlich halte Overrides so einfach wie möglich
.hide {
position: absolute;
left: -200em;
}
Beachten Sie die Verwendung von ems, die den Inhalt weiter vom Bildschirmrand wegschieben, je mehr die Schriftgröße vom Benutzer erhöht wird.
Funktioniert meistens, aber manchmal benötigen Sie vielleicht
.hide {
position: absolute;
left: -200em;
width:0;
height:0;
overflow:hidden;
}
Aber das wäre selten und es ist am besten, die minimale Version zu verwenden, bis sie fehlschlägt.
nett, aber ich glaube, Screenreader sehen den Inhalt immer noch in .hidden, was für Sehbehinderte suboptimal wäre.
Korrigieren Sie mich, wenn ich mich irre.
Hallo Herr,
function toggle_visibility(id) {
var e = document.getElementById(id);
e.style.display = ((e.style.display!='none') ? 'none' : 'block');
}
eins
zwei
drei
Wenn ich alle drei Steuerelemente anklicke, überschreiben sich die Div-Inhalte (verschmelzen mit demselben Inhalt). Wie kann ich das verhindern?
Das ist großartig, danke für Ihre Unterstützung!
Wann wurde `display:none` veraltet? Kennen Sie überhaupt den Unterschied zwischen `visibility:hidden` und `display:none`, Jayaprakash?
Ich arbeite seit vor der Einführung von CSS als CSS-Entwickler im Jahr 1995, jetzt seit fast 11 Jahren als Senior UI Engineer, und bis heute können viele sogenannte CSS-Leute die einfache Frage nicht beantworten.
Bitte seien Sie korrekt, wenn Sie CSS-Hilfe anbieten! Wissen Sie überhaupt, wann `position:absolute` verwendet werden sollte und wie man es mit den „Elternelementen“ verschieben kann, wenn sich die Browsergröße ändert? Himmel, Herrje… lol!!!
Es ist ziemlich offensichtlich, dass Sie keine CSS-Codes schreiben. Tatsächlich existiert `display:none` immer noch in CSS3 zusammen mit all den anderen neuen Pseudo-Klassen.
Sie waren ein CSS-Entwickler, bevor CSS eingeführt wurde?
Ich würde mich vor Ihrem überlegenen Wissen verbeugen, aber ich benutze das Internet, ohne das Internet zu benutzen.
@Escrimador, sind Sie von Natur aus unhöflich oder müssen Sie sich darum bemühen? @Jayaprakash wies lediglich darauf hin, dass man manchmal ein Element ausblenden möchte, aber nicht möchte, dass es aus dem DOM verschwindet, da sein JavaScript-Programm dann den Bezug zu ihm verliert.
`visibility:hidden` hinterlässt eine Lücke, wo sich das Element befand, während `display:none` die Lücke schließt, sodass man nicht merkt, dass ein Element im Layout fehlt.
Ich glaube nicht, dass es notwendig war, so herablassend zu klingen, um eine einfache Frage zu beantworten. Nach einem Jahrzehnt in der Branche sollten Sie es besser wissen, als sich so zu verhalten.
Ihr großes „Stumpf-Ding“, das niemand kennt, ist ziemlich einfach. `visibility:hidden` lässt das Element an Ort und Stelle, macht es aber unsichtbar. `display:none` entfernt es vollständig. Nicht wirklich so kompliziert, ich bin ziemlich sicher, dass mehr Leute das wissen, als Sie ihnen zutrauen.
Ihr gesamter Beitrag liefert keinerlei Informationen, er lässt Sie nur so aussehen, als müssten Sie sich jemandem beweisen. Wenn Sie die Hilfe von jemandem kritisieren, warum versuchen Sie nicht, tatsächlich hilfreich zu sein?
Und wenn Sie Hilfe für Ihren dritten Absatz benötigen, schlage ich vor, Sie schauen sich Vererbung und Verschachtelung an. Letzteres mehr als ersteres.
Okay Pu, ich sage Ihnen etwas, das Jayaprakash Ihnen nicht gesagt hat, weil er kein qualifizierter CSS-Mensch ist.
Der Unterschied zu `visibility:hidden` ist, dass es, obwohl es auf der Webseite nicht sichtbar ist, immer noch Platz einnimmt. Das bedeutet, wenn das versteckte Element beispielsweise 500 Pixel breit und 500 Pixel hoch ist und sich in der Mitte der Seite zwischen sagen wir einem Header- und einem Footer-Element befindet, gibt es „IMMER EINEN 500X500 LEEREN RAUM, DER AUF DER WEBSEITE SICHTBAR IST, WENN VISIBILITY:HIDDEN VERWENDET WIRD“.
Mit `display:none`, mit den gleichen Elementen wie Header und Footer mit einem dazwischenliegenden Element, das auf `display:none` gesetzt ist, gibt es keinen sichtbaren und „UNGEWÜNSCHTEN WEISSEN RAUM, DER AUF DER WEBSEITE SICHTBAR IST“, es sei denn/bis eine Aktion über JavaScript/jQuery oder CSS ausgelöst wird. Der gleiche Effekt, den Sie bei Dropdown-Menüs und Akkordeons erzielen.
Seien Sie vorsichtig mit den Antworten, die Sie auf Blogs lesen. Es macht mich wirklich wütend, dass einige Leute so locker mit ihren Antworten sind und offensichtlich keine Ahnung haben, wovon sie reden.
Sagt der Mann, der behauptet, er hätte CSS entwickelt, bevor es CSS gab.
@Escrimador, die Klasse `hidden`, die @Jayaprakash vorgeschlagen hat, positioniert das Element absolut, was bedeutet, dass es aus dem Fluss genommen wird. Die Werte `left: -9999px` und `top: -9999px` verschieben es dann weit vom Bildschirm weg. Also sind Sie wieder falsch.
.hidden{
position: absolute;
left: -9999px;
top: -9999px;
visibility: hidden;
}
@Escrimador – HA HA HA, dass Sie behaupten, mit CSS gearbeitet zu haben, bevor es CSS gab. Zusätzliche HA HA HA dafür, dass Sie mit Ihrem CSS so auf dem neuesten Stand sind, dass Sie nicht einmal wussten, dass die negativen Werte für `top` und `left` das Element vom Bildschirm entfernen und somit jede Chance auf sichtbaren Weißraum verhindern (was die Grundlage Ihres Arguments war). Ich schätze, Sie hätten mehr mit Ihrem CSS üben müssen, hm? Ich hätte gedacht, Sie hätten das mit Ihren über 10 Jahren Erfahrung bemerkt.
Er hatte in einer Sache Recht, obwohl sein Beitrag aus dem Jahr 2011 stammt. Sie sollten Blogbeiträgen misstrauisch gegenüberstehen, da Sie auf einen Idioten wie ihn stoßen könnten, der sich selbst als Experten bezeichnet und nicht erkennt, dass die negative Einfügung das Element entfernt hat, was selbst dieser Anfänger wusste. HA!
WOW! @Escrimador,
Ich weiß, ich bin spät dran, ABER ich benutze beides je nach Bedarf. Wenn ich SVG-Bilder verwende, verwende ich vielleicht ‚visibility:hidden‘, da es sich um ein Bild innerhalb des DOM handelt und sich die Dinge nicht bewegen. Ich möchte auch nicht riskieren, dass ein Browser sie zu bewegen versucht, also gehe ich auf Nummer sicher.
Andere Male, wenn Daten von einer externen Quelle in eine Image Map kommen, ja, wieder mit Bildern arbeiten. Aber dieses Mal, wenn die Daten sagen, dass dieses Element nicht hier ist, verwende ich ‚display:none‘, um es vollständig von der Seite zu entfernen.
Helfen Sie mir zu verstehen, wo ich in meiner Darstellung unhöflich war und warum Sie nicht dasselbe sein und nicht so, nun ja, wie Sie sind, sein könnten. (Wir brauchen weniger von diesen „Typen“ in dieser Welt)
Die Reaktion auf Jayaprakash war viel zu heftig, Leute.
Er hat nie tatsächlich gesagt, dass `display:none` veraltet sei. Es gibt wirklich keinen Grund, ihn persönlich anzugreifen.
Er sagte lediglich, dass einige Browser es anders handhaben… „Einige Versionen von Webkit-basierten Browsern betrachten `display:none` so, als wäre das Element kein Teil mehr des DOM.“
Wenn das wahr ist, könnte das einige seltsame Verhaltensweisen erklären, die ich gesehen habe. Ich würde es gerne endgültig wissen.
Ich benutze diese Methode für FAQs, bei denen jede Antwort standardmäßig ausgeblendet ist und nur angezeigt wird, wenn eine Frage angeklickt wird. Gibt es eine Möglichkeit, eine bestimmte Frage mit einer URL und einem Anker anzusprechen, sodass beim Besuch des Links zu dieser Frage gescrollt wird und diese Antwort standardmäßig erweitert ist?
Danke!
Hallo Chris, ich habe jQuery schon oft für Toggles verwendet. Auf der Website eines Kunden habe ich diesmal CSS3 mit `:target` für das Toggle verwendet. Es hat wirklich funktioniert, also habe ich einen Tutorial darüber geschrieben und teile ihn hier :)
http://webstutorial.com/html5-css3-toggle-slideup-slidedown/html-5
@Dillon @Drew, das Problem mit dem doppelten Klicken hat mir auch einige Probleme bereitet, aber dank dieses Beitrags habe ich eine Lösung gefunden.
Kurz gesagt, der erste Klick löst den *if*-Teil der Funktion aus und fragt „ist die *display*-Eigenschaft des Elements auf *block* gesetzt?“, und die Funktion endet „vorzeitig“ (sozusagen), da sie diese Abfrage korrekt prüft. Der zweite Klick bringt das Skript zum Laufen, da es die *if*-Bedingung bereits mit dem ersten Klick geprüft hat.
Man muss also quasi die Logik des Skripts „austricksen“.
Mit diesem ist nur ein Klick nötig, da es fragt „ist die *display*-Eigenschaft des Elements auf *none* gesetzt?“, die Funktion prüft, dass dies nicht korrekt ist, und direkt zum else-Teil übergeht und den gewünschten Effekt erzielt!
Ich hoffe, das ist irgendwie verständlich, Englisch ist nicht meine Muttersprache ;)
Prost!
Eine Frage: Wie implementiere ich das in verschiedenen Divs?
Und danke fürs Teilen.
Danke, ich habe es bereits herausgefunden.
Ich fragte mich, ob es eine Möglichkeit gibt, den Inhalt im Div zu verbergen und ihn durch Klicken auf den Anker zu öffnen, anstatt ihn offen zu haben und darauf klicken zu müssen, um ihn zu schließen. Also im Grunde das Gegenteil des aktuellen Skripts. Danke im Voraus.
Toller Beitrag, Chris! Max, ich konnte die von Ihnen beschriebenen Ergebnisse erzielen, indem ich einfach eine `display:none`-Deklaration zu dem Element hinzugefügt habe, auf das ich das Skript anwende.
Sie müssen dann sicherstellen, dass das Skript wie in Chris' ursprünglichem Beitrag geschrieben ist, wo der erste Klick das `block` anzeigt, wie folgt:
Dadurch wird sichergestellt, dass das Element beim Laden der Seite nicht angezeigt wird und nur ein einziger Klick zum Ein-/Ausschalten benötigt wird.
Beim Ein-/Ausblenden von Elementen habe ich zwei Elemente in dasselbe Div gelegt. Was ich tun möchte, ist, das eine zu verbergen, wenn das andere angezeigt wird. Denn wenn ein Element angezeigt wird und das andere auch enthüllt wird, überlagert das letztere das ältere. Ich möchte, dass nur das neue angezeigt wird. Wie kann ich das tun?
Hey, danke dafür!
Ich habe ein Problem, bei dem das Div zwar wie gewünscht angezeigt und ausgeblendet wird, aber ich jedes Mal, wenn ich auf den Toggle klicke, zum Seitenanfang springe. Das ist sowohl in FF als auch in Chrome der Fall. Irgendwelche Ideen?
Danke!
Hey Alex,
Das liegt wahrscheinlich daran, dass das Ankerziel im Beispiel „#“ ist, was Sie zum Seitenanfang springen lässt, weil der Browser nach einer ID ohne Namen sucht. Ein Link mit einem Ziel von „#header“ würde Sie ebenfalls zum Element mit der ID „header“ springen lassen!
Die Verwendung eines `span` mit einem `onclick`-Ereignis *sollte* es Ihnen ermöglichen, das Ziel vollständig wegzulassen
<span onclick="toggle_visibility('foo');">Klick mich</span>Wirklich cooles, rundum nützliches Code-Stück, aber ich würde gerne den „Weiterlesen…“-Button entfernen oder ausblenden, sobald er geklickt wurde und der anfänglich versteckte Inhalt nun angezeigt wird.
Vielen Dank! Sehr nützlich!
Ich habe den Code zu dem untenstehenden geändert und er funktioniert einwandfrei. Aber eine Sache, bei der ich mir nicht ganz sicher bin, ist, wie man ein Bild für beide Zustände anzeigen lässt. Ich möchte „Expand“ und „Collapse“ verwenden und es funktioniert nicht. Ich bin kein JS-Entwickler, ich kenne HTML und CSS sehr gut, aber JS nicht so sehr, ich kann es verstehen, aber ich kann es nicht schreiben. Irgendwelche Ideen?
Ich bin neugierig, kann mir jemand erklären, wie man so codiert, dass beim Öffnen eines Toggles die Anzeige den oberen Teil des Toggle-Inhalts zeigt?
Immer wenn ich Toggles mit langem Text verwende, habe ich das Problem, dass beim Öffnen der Bildschirm den Inhalt vom unteren Ende des Toggle-Feldes und nicht vom oberen anzeigt.
Das würde ich gerne ändern. Danke für jede Hilfe.
Ich habe ein Problem mit IE 9 (ausgerechnet), wenn ich diesen Toggle verwende. Ich benutze ihn, um eine Navigation umzuschalten, und IE 9 frisst meine Listenelemente, wenn dieses Skript vorhanden ist. Hat jemand ein ähnliches Problem oder eine Lösung? Hier ist mein Markup
Ich kann diese Funktionen nicht zum Laufen bringen, wenn die Webseite SOWOH 1) ein `display: block`-Div hat, das zum Ausblenden ausgelöst werden muss, ALS AUCH 2) ein `display: none`-Div, das zum Erscheinen ausgelöst werden muss. Wenn ich die Logik der Funktion umkehre, muss ich entweder 2 Klicks zum Anzeigen und 1 Klick zum Ausblenden oder 2 Klicks zum Ausblenden und 1 Klick zum Anzeigen durchführen. Wie kann diese Funktion korrekt geschrieben werden, um beide Situationen mit nur 1 Klick abzudecken?
Hallo WordPress, was ist das Problem mit dieser Seite – http://theblackcheese.org/category/blog/
Warum sind die Beiträge nicht sichtbar und die Kategoriebeiträge nicht sichtbar, alle Beiträge sind nicht sichtbar, bitte helfen Sie mir.
Mit freundlichen Grüßen,
Abner
Dieses Skript ist ausgezeichnet! Danke fürs Teilen. Das einzige Problem, das ich habe, ist eine Möglichkeit, andere Divs, die durch andere Klickereignisse angezeigt wurden, richtig zu ‚verstecken‘. Ich habe zwei Schaltflächen, die ich mit diesem Skript verwenden möchte, aber ich muss den Inhalt, der von einer Schaltfläche angezeigt wird, schließen, wenn ich auf die andere Schaltfläche klicke.
Ich bin mir nicht sicher, ob das Sinn macht. Ich möchte einfach nicht, dass zwei Informationssätze gleichzeitig angezeigt werden. Danke im Voraus für all Ihre Hilfe!
Hallo, ich habe gelesen, dass Suchmaschinen wie Google JavaScript ignorieren. Wenn ich diesen Code verwende, um Text im Toggle zu platzieren, wird er dann ignoriert oder wird Google den Text crawlen?
Eine schnelle Antwort darauf wäre sehr hilfreich.
Danke……
Hallo,
Ich habe Textlinks, die alle „onClick Show/Hide“ verwenden, aber ich möchte, dass vor dem Klicken auf die Links ein anderes Bild in diesem Bereich erscheint.
Außerdem möchte ich, dass der ‚aktuelle‘ Textlink fett gedruckt wird, bis der nächste Link geklickt wird.
Ich glaube, das ist wahrscheinlich eine einfache Lösung für alle von Ihnen. Kann mir jemand helfen? Danke im Voraus. :)
Was ich habe: http://thispixelstudios.com/working/scottsdaleranch/index_test.html
Beispiel dessen, was ich will (vertikaler 4-Link-Bereich): http://www.drsrtc.com/
Danke Leute, irgendwie bin ich wieder auf CSS Tricks gelandet, nachdem ich hoffnungslos nachgelesen hatte, wie man ein so einfaches Snippet auf mindestens 5 verschiedenen Diskussionsforen im Web implementiert.
Ich möchte insbesondere andere Googler auf Stephs `<span>`-Verwendung hinweisen, um zu vermeiden, dass der Benutzer an den Seitenanfang gesendet wird.
Nochmals vielen Dank!
Dieses Skript funktioniert wirklich gut, danke.
Aber gibt es eine Möglichkeit, ihm eine kleine Animation hinzuzufügen, damit es etwas flüssiger ist?
Das hat gut funktioniert
http://www.randomsnippets.com/2008/02/12/how-to-hide-and-show-your-div/
Großartig, klar, kurz!
Irgendwelche Vorschläge zum Hinzufügen von Übergängen/Animationen dazu?
CSS-Übergänge funktionieren meines Wissens nach nicht mit der `display`-Eigenschaft.
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == ‘block’) {
//Setze Opazität auf Null, mit einer CSS-Transition-Dauer von 0,3 Sekunden
e.style.opacity = ‘0’;
//Setze Timeout von 300 ms (oder der Transition-Dauer Ihres CSS), um das Element aus dem Fluss zu entfernen
setTimeout(function(){
e.style.display = ‘none’;
}, 300)
} else {
//Setze das Element sofort wieder in den Fluss
e.style.display = ‘block’;
//Setze nun die Opazität des Elements auf 1, was schön mit CSS-Übergängen erfolgen wird
e.style.opacity = ‘1’;
}
}
Und fertig ;)
HAHAHA – Ihr verarscht mich doch, oder? Bitte weitermachen, das ist sehr unterhaltsam. Ihr streitet über ein paar Code-Schnipsel. Ihr seid alle schlimmer als eine Gruppe von 14-jährigen Mädchen, die über Justin Bieber Musik streiten lol…
Tolles Skript und es kollidiert nicht mit dem bereits auf meiner Seite verwendeten jQuery! Danke
Ich habe das für ein kleines Projekt verwendet. Aber meiner Meinung nach ist das Hinzufügen/Entfernen von Klassen viel besser.
function toggle(id) { el = document.getElementById(id); el.style.display = (el.style.display == '') ? 'none' : '' }Anstatt visibility:hidden zu verwenden, nutzen Sie display:none;, damit dieses Element standardmäßig ausgeblendet wird, und erstellen Sie eine Animation, die slideToggle oder einfach nur Anzeigen und Ausblenden durch einen Klick-Event ermöglicht.
Hallo! Ich habe diese Funktion implementiert, aber das Problem ist, dass sich der Rest der Seite nicht nach unten verschiebt, wenn das ausgeblendete Element erscheint. Das Element erscheint also über dem Rest der Seite. Gibt es eine Möglichkeit, das zu vermeiden? Danke!
Hallo, danke für den praktischen Code, er hat bei mir in Chrome nicht ganz funktioniert – ich hatte das Problem mit den zwei Klicks. Der Grund dafür ist, dass mein Div-Stil standardmäßig auf display:none gesetzt war, was bedeutete, dass e.style.display eine leere Zeichenkette war, und nicht 'none'. Der Weg, das Problem mit den zwei Klicks zu vermeiden, ist also, zu prüfen, dass die Zeichenkette NICHT gleich 'block' ist, was sowohl 'none' als auch '' auf die gleiche Weise behandelt.
Hallo,
Vielen Dank an alle, dass Sie großartige Dinge teilen.
Ich habe alles gemacht, was Sie gezeigt haben, und es funktioniert großartig.
Ich habe eine Frage.
Was ist, wenn ich die ausgeblendeten Divs von einer anderen Seite verlinken möchte, sodass, wenn ich auf diesen Link klicke, das spezifische Div geöffnet wird und die anderen geschlossen bleiben.
Vielen Dank.
Das geht sogar einfacher mit JavaScript. CSS3 bietet eine solche Funktion, Sie können den Checkbox-Trick verwenden, hier ist ein Beispiel, es ist genauso einfach wie Ihr JS: Erstellen einer Toggle-Box zum Ein- und Ausklappen von Inhalten nur mit CSS3
Die Funktion ist großartig, aber wie benutze ich sie in einer Tabelle?
<div>funktioniert in einer Tabelle nicht gut. Ich habe eine Reihe von Links in Tabellenzellen, und alle von ihnen haben die Klasse "page".<table> <a href="visible1.html" rel="nofollow">sichtbare Seite 1</a> <a href="visible2.html" rel="nofollow">sichtbare Seite 2</a> <a href="test1.html" rel="nofollow">test1</a> <a href="test2.html" rel="nofollow">test2</a> <a href="test2.html" rel="nofollow">test3</a>Wie programmiere ich die JavaScript-Funktion, um die Links anzuzeigen/auszublenden? Danke!
Einige modifizierte >
JavaScript
<script type="text/javascript"><!--
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'none'){
e.style.display = 'block';
}else{
e.style.display = 'none';
}
}
//-->
</script>
html
<input type="button" value="anzeigen" onclick="toggle_visibility('test');"><div style="display:none;" id="test">div-Inhalt</div>
nett, aber man könnte es animieren
und etwas Stil hinzufügen
zu einem Menü :)
Hallo, wie kann ich dieses Anzeigen/Ausblenden für mehrere Elemente verwenden? Ich möchte 3 'foo' mit derselben ID haben, egal welches ich anklicke, ich zeige/blende alle aus. Wie kann ich diesen Code bearbeiten?
Tom, um es klarzustellen, es funktioniert nicht so, mehrere Elemente mit derselben ID zu haben. Meine Lösung wäre, etwas Ähnliches zu tun:
JS-Funktion, die einen String-Parameter mit einem Trennzeichen wie Komma "," akzeptiert.
in Element onClick="toggleMultiple('foo1,foo2,foo3');"
Ich hoffe, es hilft.
Hallo
Wie würde man dies verwenden, wenn man mehrere Divs hat, dass das angeklickte auf dem Bildschirm angezeigt wird und andere Divs ausgeblendet werden?
Mak,
nicht sehr klar mit Ihrer Frage, vielleicht können Sie sich auf den Code beziehen, den ich für **Tom** vorgeschlagen habe. Könnte das etwas sein, was Sie tun möchten?
es funktioniert, aber wie blendet man den Klick-Button aus und wie ändert man den Button zum Zeitpunkt des Klicks?
Heilige Scheiße, dieses kleine Nugget hat mir total aus der Patsche geholfen. DANKE CHRIS!!!
du bist ein Genie!
Funktionierte nicht, als ich es in jsfiddle ausprobierte. Seltsam...
Hallo
Bitte, wie kann ich ein DIV ausblenden, wenn der Benutzer außerhalb davon klickt?
Danke
Wie muss ich den Code ändern, wenn ich möchte, dass das Div zu Beginn ausgeblendet ist und dann beim Klicken angezeigt wird? :)
Danke
Danke! Ich bin extrem neu in der Webentwicklung und kenne NICHTS von JavaScript. Wenn ich es lange genug anschaue, kann ich herausfinden, was es tut, also war dieser kleine Code-Schnipsel perfekt für das, was ich tun wollte :)
Bitte, ich bin neu in JavaScript. Ich brauche ein Skript, das mehrere Divs umschaltet. Das heißt, wenn ich auf eines klicke, schließen sich die anderen, ohne dass ich noch einmal darauf klicken muss. Unten ist, was ich entwickelt habe, aber es erfordert, dass ich noch einmal klicke, bevor es sich schließt.
Function clicmHandler (id ){
Var e =document. getElementById(id );
If (e.style.display ==’block’ ){
e.style.display = ‘none ‘;
else
e.style.display =’block’;
}
}
Suche genau dasselbe!
Hat jemand Antworten??
Wie blendet man verschiedene Elemente mit derselben ID ein/aus? Zum Beispiel verschiedene Abschnitte eines Blogs.
Sie können es verwenden, vielleicht hilft es Ihnen.
http://findnerd.com/list/view/How-to-open-and-close-div-using-css/462/
Gibt es eine Möglichkeit, 2 verschiedene Links zu haben?
Bilder ausblenden (wenn Bilder angezeigt werden)
Bilder anzeigen (wenn Bilder ausgeblendet sind)
Funktioniert wie ein Zauber!! :)
Ich bin irgendwie ein Anfänger in Sachen Programmierung, wie initiiere ich den slideToggle-Effekt dazu?
Danke!
es funktioniert perfekt, Mann! großartig.
Ich habe ein wenig mit diesem Toggle-Ding gearbeitet, um eine One-Page-Website mit drei verschiedenen Sprachen zu erstellen. Ich wollte alle drei Übersetzungen auf derselben Seite haben, damit ich nicht mehrere HTML-Dokumente schreiben musste. Ich kam zu folgendem Ergebnis;
JavaScript
Und die Textbeispiele
Herr L. Hansen, das ist großartig. Es gefällt mir. Ich möchte wissen, warum die Unicode-Zeichen der indischen Nationalsprachen nicht angezeigt werden, obwohl sie in UTF-8 kodiert sind. Bitte leiten Sie mich an. Danke.
Was passiert, wenn Sie ein Element umschalten, das keine Block-Level-Positionierung haben sollte? Sie zwingen alle Elemente, die durch diese Funktion laufen, zwischen den Anzeigewerten 'block' oder 'none' umzuschalten. Was ist, wenn es sich um ein Inline-Element handelt oder als inline-block eingestellt ist?
function toggle_visibility($elm) {
};
Ich verwende diese Logik, aber mit jQuery, offensichtlich wäre die Vanilla-Lösung von is(':visible') viel ausführlicher.
Dies ermöglicht es Ihnen, die ursprüngliche Positionseigenschaft des Browser-DOM beizubehalten. Meine Entschuldigung, falls dies bereits behandelt wurde.
Kann mir bitte jemand sagen, wie ich den Text standardmäßig ausblenden kann?
Hallo, probieren Sie meinen Code im Kommentar unten...
Vielen Dank! Einfach, kurz und bündig! (= Ich habe es umgekehrt gemacht... Den Text zuerst ausblenden und dann wird er beim Klicken angezeigt.
Hier ist der Code
Ich weiß nicht, wie ich Ihnen danken kann! Ihr Code ist genau das, wonach ich gesucht habe!
DANKE!!!!!
Hallo! Ich wollte Ihnen dafür danken! Es gab so viele Treffer bei Google für so viele sehr komplizierte Geräte, um ein zu zeigendes/auszublendendes
<
div>, dass ich nicht dachte, ich würde etwas finden, das es wert ist und so reibungslos funktioniert. Großartig, einfach und auf den Punkt gebracht.
Das ist ein sehr schönes Beispiel zum Umschalten
Es ist ein nützlicher Code, der sehr leicht zu verstehen ist.
Vielen Dank
Gibt es eine Möglichkeit, den Link verschwinden zu lassen, sobald er angeklickt wurde?
Es gibt also einen Link, der "mehr lesen" oder so etwas sagt. Wenn man darauf klickt, erscheint das Div (was ich bereits erreicht habe, indem ich das display:none; Tag eingefügt habe) und gleichzeitig erscheint das Div, der Link "mehr lesen" verschwindet.
@James Ich habe einen Pen gemacht, der nützlich sein könnte. Das winzige Skript ersetzt den Text, auf den Sie klicken, indem es den Anzeigestil und den eines ausgeblendeten Divs ändert, das beliebige Mengen an Inhalt haben kann. Es ist kein Toggle.
einfach und funktioniert! tolle Arbeit, danke!
Ich versuche, das Element zunächst ausgeblendet und dann beim Klicken angezeigt zu bekommen. Ich habe versucht, display: none; oder visibility: hidden; zu verwenden, aber das bewirkt nur, dass es gar nicht angezeigt wird, selbst wenn der Button geklickt wird. Ich habe auch versucht, den Stil des Originalcodes anzupassen, um das Gegenteil zu spiegeln, wie jemand in einem früheren Kommentar vorgeschlagen hat, aber es ist nichts passiert.
Hat jemand andere Vorschläge oder Korrekturen, um das Element ausgeblendet und dann beim Klicken angezeigt zu bekommen?
Hallo!
Ich passe ein einfaches Slider-Skript an, das ich gefunden habe und das perfekt funktioniert. Mit display: none für jeden < li > und display: block für das Ziel < li > kann ich jedes Bild separat von einer anderen Seite verlinken. Das Problem ist, dass dieses Zielbild beim Verwenden des Sliders sichtbar bleibt, ich denke, es fehlt ein Teil des Skripts für diese Verwendung. Ich habe Stunden damit verbracht, den Weg zu finden, aber ich denke, es liegt außerhalb meiner Möglichkeiten. Ich würde mich über jede Hilfe freuen.
Das ist der Slider
http://codepen.io/danielillo/pen/WGQkzk
Und das ist der Link für die "aufrufende" Seite zu den Bildern
https://dl.dropboxusercontent.com/u/74509233/TEMP/CALLLIST2.html
Danke
Hallo!
Ich passe ein einfaches Slider-Skript an, das ich gefunden habe und das perfekt funktioniert. Mit display: none für jeden < li > und einer Klasse mit display: block für das Ziel < li > kann ich jedes Bild separat von einer anderen Seite verlinken. Aber wenn ich den Slider nach dem Klicken spiele, geht der nächste Button zum ersten Bild und der vorherige Button zum letzten. Ich möchte, dass der Slider vom angeklickten Bild fortfährt. Gibt es eine Lösung?
Das ist der Slider
http://codepen.io/danielillo/pen/WGQkzk
Und das ist der Link für die "aufrufende" Seite zu den Bildern
https://dl.dropboxusercontent.com/u/74509233/TEMP/CALLLIST3.html
Danke
Es ist gut, vielen Dank für Ihre Unterstützung.
Danke @JJ...
Ihr Skript war das einzige, das ich richtig zum Laufen gebracht habe. Dies blendet das Element aus und zeigt es beim Klicken korrekt an (wie von so vielen hier gewünscht).
<script type="text/javascript">function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'none')
e.style.display = 'block';
else
e.style.display = 'none';
}
</script>
UND die HTML, die aktualisiert werden musste
<a href="#bar" name="bar" onclick="toggle_visibility('foo');">Mehr lesen...</a><div id="foo" style="display:none;">Zeige diesen FOO.</div>
Ich bin weit davon entfernt, ein JS-Experte zu sein..., aber kann jemand dieses Skript modifizieren, um ein wenig Animation hinzuzufügen? Etwas wie ein sanfter Slider?
Danke!
S
hi
Eigentlich, wenn wir Login- und Signup-Formulare nebeneinander haben, dann wenn wir auf das Login-Formular klicken, sollte das Signup-Formular unsichtbar sein und das Login-Formular sichtbar.
Ich mag dieses Toggle, aber wie kann ich es so einrichten, dass es einfach einen Textblock ersetzt? Ich habe Biografien für Mitarbeiter, die ich umschalten/ersetzen möchte, wenn verschiedene Fotos angeklickt werden. Im Moment wird die Biografie einfach unter der zuletzt angeklickten hinzugefügt. Danke!
Hallo Sir, ich bin neu in JavaScript, also muss ich Sie fragen, wie man einen Toggle-Button erstellt, der ein Div ausblendet, wenn ich meine Webseite starte, und es dann beim Klicken anzeigt?
Hallo, das war nur für ein Aus- und Einblenden, ich habe es für mehrere verwendet und es funktioniert gut, aber wie blende ich alle aus, außer dem angeklickten (aktuellen)?
Sie müssen eindeutige IDs für jedes Div generieren, wenn die Seite angezeigt wird. Ich habe das für eine Anwendung gemacht, die ich erstellt und pflege.
Danke Herr Chris Coyier, ich fand diesen Code sehr funktionell und ich denke, dies ist die einfachste Lösung dafür.
Die Verwendung von style=”display:none;” innerhalb des div-Tags hat bei mir funktioniert und das Doppelklickproblem vermieden, wie jemand im August 2013 empfohlen hat. Ich wollte zuerst ausblenden und dann mit einem einzigen Klick anzeigen, nicht doppelt.
<div id="foo" style="display:none;">Ohne ein CSS-Spezialist zu sein, vermute ich, dass es mit den verschiedenen Ebenen der Kaskadierenden Stilvorlagen zu tun hat.
Vielen Dank an alle.
Wenn ich einen Button in HTML erstellt habe und möchte, dass er versteckt ist und nur erscheint, wenn die Funktion es sagt.
wie mache ich das?
Kannst du uns sagen, wie man ein erstes geklicktes Div ausblendet, wenn ein zweites Div gerade angezeigt wurde?
Vielen Dank
Wie blendet man ein Div aus, aber zeigt ein anderes an? Die Lösungen hier sind zum reinen Ausblenden. Kann mir bitte jemand Code posten, der das eigentliche Problem löst. Ich habe mehrere Divs und möchte jeweils nur eines anzeigen, während die anderen ausgeblendet sind. Einfach ausgedrückt: Ich klicke auf einen anderen Button und nur das damit verknüpfte Div wird angezeigt, während die anderen verschwinden.
Es funktionierte in Chrome nicht mit der if-else-Bedingung. Ich habe if-else durch einen ternären Operator ersetzt und jetzt funktioniert es gut.
Wie macht man das für zwei Buttons?
Es funktioniert! Aber ich habe ein weiteres Problem: Es funktioniert nur beim ersten Mal. Wenn ich es ein zweites Mal anklicke, funktioniert es nicht mehr und ich muss die Webseite neu laden. Ich bin Anfänger, kann mir also bitte jemand bei meinem Problem helfen? Vielen Dank für Ihre Hilfe.