[FRAGE] Div einmalig aufklappen - display:none oder display:block

[LikeStar]

Hallo Leute

besteht die Möglichkeit per onclick einen DIV wieder einzublenden?

Mal angenommen ein DIV Container hat einen

Style="display:none"

Ich möchte bitte, dass wenn ich auf ein LINK drücke, die mein DIV einmalig eingeblendet wird. Danach ist es nicht mehr möglich.

Ich bitte um ein Beispiel. Ich wäre euch da sehr verbunden.

Edit:

Ich benötige noch ein Beispiel:
Wenn ich auf ein LINK drücke, soll gleichzeitig ein anderer LINK sich von selbst tätigen. Es handelt sich aber hier nicht um window.location.

 

[j-l-n]

//var div = DIV-Container
div.onclick = function(){
  "use strict";
  if(div.style.display === "none"){
    div.style.display = "";
    //oder:
    div.style.display = "block";
    //oder:
    div.style.display = "inline";
  }
}

- - - Aktualisiert - - -

Ich benötige noch ein Beispiel:
Wenn ich auf ein LINK drücke, soll gleichzeitig ein anderer LINK sich von selbst tätigen. Es handelt sich aber hier nicht um window.location.

Handelt es sich dabei um eine damit verknüpte onclick-Funktion? Wenn ja, rufe diese doch einfach direkt per JS auf...

 

[LikeStar]

Hi und danke.

//var div = DIV-Container

Muss ich dort eine ID oder ein CLASS eingeben?

Handelt es sich dabei um eine damit verknüpte onclick-Funktion? Wenn ja, rufe diese doch einfach direkt per JS auf...

function Aendern1 () {
  tu Etwas;
  tu Etwas;
  Link B soll sich von selbst tätigen;
}

 

[j-l-n]

Muss ich dort eine ID oder ein CLASS eingeben?

Weder noch, du musst das Element definieren. Das kannst du beispielsweise über document.getElementById("ID des div").

Was genau passiert jetzt durch das Anklicken von Link B? Wird die Funktion "Aendern1()" dadurch aufgerufen? Wenn ja, dann kannst du diese ja einfach im onclick direkt ausführen:

div.onclick = function()
  "use strict";
  if(div.style.display === "none"){
    div.style.display = "";
    //oder:
    div.style.display = "block";
    //oder:
    div.style.display = "inline";

    Aendern1();
  }
}

PS: du solltest aussagekräftige Funktionsnamen benutzen. Bei Namen wie "Andern1" verlierst du leicht den Überblick, und ein anderer kennt sich damit erst recht nicht aus...

 

[dbarthel]

Wenn Link B auch eine Funktion aufrufen soll, dann so:

function Aendern1 () {
Tu was;
Aendern2();
}
function Aendern2 () {
Tu was;
}

JULIAN war schneller

 

[LikeStar]

Ich habe es mittlerweile so umgesetzt:

js. Datei

function toggleMe(a){
	
var e = document.getElementById(a);

// Prüfung exixtiert eine Element mit dieser ID?
if(!e)return true;

  // Umschaltung
  if(e.style.display == "none")
  {
  e.style.display = "block"
  }

return true;
}

Html Datei

<div id="para11" style="display:none"></div>
<a href="javascript:void(0)" onClick="return toggleMe('para11')">LINK</a>

Ahh jetzt funktionierts!



An Alle Experten!

@dbarthel, @Julian,


Mein Code funktioniert nur für 1 Div Container. Leider gilt es nicht für alle DIVs mit der ID Para11
Kann ich dies auch für alle DIVS so umsetzen?

Normalerweise wird leider nur 1 Objekt eingeblendet. Das finde ich schade.

 

[dbarthel]

Um mit beliebigen Divs zu arbeiten, musst du deiner Funktion, mittels this.id, die Id des jeweiligen Divs übergeben.

toggleMe (this.id)

 

[LikeStar]

Ich habe im Übrigen viele Divs:

<div style="display:none" id="para11">div1</div>
<div style="display:none" id="para11">div2</div>
<div style="display:none" id="para11">div3</div>
<div style="display:none" id="para11">div4</div>
<div style="display:none" id="para11">div5</div>

Mit einem Click

<a href="javascript:void(0)" onclick="return toggleMe('para11');">Link</a>

sollen alle divs mit der ID="para11" wieder eingeblendet werden.

 

[mikdoe]

Das geht nicht. eine ID darf dokumentenweit nur einmal vorkommen!

 

[dbarthel]

Das geht nur über eine Klasse.

<div class="para11">

Dann könntest du mit jquery nach dieser Klasse selektieren und einen .click Event definieren, der das display-Attribut ausliest und dann die Sichtbarkeit abändert.

 

[mikdoe]

Oder man erweitert die ID indem man einfach noch eine fortlaufende Ziffer dran hängt.

 

[dbarthel]

Oder man erweitert die ID indem man einfach noch eine fortlaufende Ziffer dran hängt.

Dann würde doch aber wieder nur eines sichtbar gemacht und nicht alle, oder willst du die fortlaufende Nummer in einer Schleife hochzahlen?

 

[mikdoe]

Einen Anfang einer ID kann man auch mit einem einfachen jQuery Selector ansprechen.
http://api.jquery.com/attribute-starts-with-selector

 

[dbarthel]

Ja kann man und finde ich persönlich sogar gut geeignet.

Bin halt bei Jquery immernoch beim hinzuLERNEN.

 

[LikeStar]

Hi und danke für die Antworten.

Kann ich mein Code nicht einfach anpassen?

function toggleMe(a){
	
var e = document.getElementById(a);

// Prüfung exixtiert eine Element mit dieser ID?
if(!e)return true;

  // Umschaltung
  if(e.style.display == "none")
  {
  e.style.display = "block"
  }

return true;
}

und statt documend.getElementById(a)

einfach documend.getElementByClass(a)

machen?

 

[dbarthel]

und statt documend.getElementById(a)

einfach documend.getElementByClass(a)

machen?

Dann muss es aber

 document.getElementsByClassName()

heißen.

 

[LikeStar]

function toggleMe(a){
	
var e = document.getElementByClassName(a);

// Prüfung exixtiert eine Element mit dieser ID?
if(!e)return true;

  // Umschaltung
  if(e.style.display == "none")
  {
  e.style.display = "block"
  }

return true;
}

Funktioniert leider niciht =/:icon8:

 

[dbarthel]

Du hast ja jetzt mehrere Elemente ausgewählt, du musst schon auch sagen, für welche die Funktion ausgeführt werden soll, und das var e= braucht es auch nicht.

var el=document.getElementsByClassName (a);

for (var i=0; i < el.length; i++;)
{
el[i].click()
}

Besser als ByClassName wäre es aber jquery zu benutzen, da ByClassName im IE nicht 100% funktioniert.

 

[LikeStar]

Du hast ja jetzt mehrere Elemente ausgewählt, du musst schon auch sagen, für welche die Funktion ausgeführt werden soll, und das var e= braucht es auch nicht.

Danke.


so schaut meine html seite aus:

<a href="javascript:void(0)" onclick="return toggleMe('para11');">Link</a>

<div style="display:none" class="para11">div1</div>
<div style="display:none" class="para11">div2</div>
<div style="display:none" class="para11">div3</div>
<div style="display:none" class="para11">div4</div>
<div style="display:none" class="para11">div5</div>

 

[dbarthel]

Kannst dann in der For Schleife (siehe mein Post) einfach deinen Display-Aender-Code einfügen.

Sollte funktionieren.

If (el [i].style.display == "none")
{
el [i].style display = "block";
}

Ungetestet.