Div mit JS verstecken

Webdesign & Technik HTML & CSS
1

Ich habe bisher auf meiner Seite immer ein Script benutzt das divs anhand der Id versteck hat.
Jetzt hab ich versucht das ganze auch für Klassen zu erweitern. Leider funktionierts nicht (wie sollte es auch anders sein :/)

Daher frage ich euch jetzt mal um Hilfe.


   1.
      <script type="text/javascript">
   2.
               function getElementsByClass(layer2,node,tag) {
   3.
              var classElements = new Array();
   4.
              if ( node == null )
   5.
                      node = document;
   6.
              if ( tag == null )
   7.
                      tag = '*';
   8.
              var els = node.getElementsByTagName(tag);
   9.
              var elsLen = els.length;
  10.
              var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
  11.
              for (i = 0, j = 0; i < elsLen; i++) {
  12.
                      if ( pattern.test(els[i].className) ) {
  13.
                              classElements[j] = els[i];
  14.
                              j++;
  15.
                      }
  16.
              }
  17.
              return classElements;
  18.
              }
  19.
       
  20.
       
  21.
       
  22.
       
  23.
       
  24.
       
  25.
               function init() {
  26.
              document.getElementById('layer').style.display = 'block';
  27.
                                              }
  28.
       
  29.
               function init2() {
  30.
              document.getElementsByClass().style.display = 'none';
  31.
                                              }
  32.
       
  33.
               function toggleDisplay (layer2) { if (document.getElementsByClass().style.display == 'block')  {
  34.
              document.getElementsByClass().style.display = 'none';
  35.
              }
  36.
              else {
  37.
              document.getElementsByClass().style.display = 'block';
  38.
              } }
  39.
       
  40.
       
  41.
               function toggleDisplay (id) { if (document.getElementById(id).style.display == 'block')        {
  42.
              document.getElementById(id).style.display = 'none';
  43.
              }
  44.
              else {
  45.
              document.getElementById(id).style.display = 'block';
  46.
              } }
  47.
       
  48.
               window.onload = init;
  49.
               window.onload = init2;
  50.
              </script>
2

function Ausblenden() { document.getElementById("js_output").style.display = "none"; }
js_output ist die id des elements.

3

Ok mir ist noch ein anderer Fehler aufgefallen und mein leider nocht nicht funktionierender code sieht jetzt so aus:

getElementsByClass:

function getElementsByClass(searchClass,node,tag) { var classElements = new Array(); if ( node == null ) node = document; if ( tag == null ) tag = '*'; var els = node.getElementsByTagName(tag); var elsLen = els.length; var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)"); for (i = 0, j = 0; i < elsLen; i++) { if ( pattern.test(els[i].className) ) { classElements[j] = els[i]; j++; } } return classElements; }

Die Ausblenden funktion:

window.onload = init2;     
function init2() {
	document.getElementsByClass('layer2').style.display = 'none';
					}[/code]

Und die toggle funktion:
[code]         function toggleDisplay ('js_output') { if (document.getElementsByClass('layer2').style.display == 'block')	{
	document.getElementsByClass('layer2').style.display = 'none';
	}
	else {
	document.getElementsByClass('layer2').style.display = 'block';
	} }
4

Aus: viewtopic.php?f=6&t=10263

[quote=“fishi”][code]

Versteckten Text anzeigen…





blabla








[/code]
Kann ja auch nicht gehen

Auf meiner Seite habe ich das so Realisiert:

Im Header Bereich:

<script type="text/javascript">
    <!--
    function js_hidden_and_show(element){
      if(document.getElementById(element).style.display == "block") {
          document.getElementById(element).style.display = "none";
      } else {
          document.getElementById(element).style.display = "block";
      }
    }
    -->
  </script>

im Body

<a href="#" onclick="javascript: js_hidden_and_show('javascript');">Anzeigen</a>
<div id="javascript">
Ich bin der Versteckter Text :P
</a>

Wenn man darauf dann noch mal drauf Klickt wird es wieder aus geblendet. :wink:[/quote]

5

@marc bei divs mit Ids klappts ja, aber ich will die divs per klasse zuordnen :confused:

Mir ist grad aufgefallen, dass was ich vorhabe vermutlich so eh nicht realisiebar ist, da die toggle funktion bei mehreren divs ja alle ein bzw. ausblenden würde.

6

du musst den Divs verschiedene ID’s geben

7 
machs doch so!

machs doch so!

8

[code]

Nr. 1 öffnen

Ich bin der Text 1

Nr. 2 öffnen

Ich bin der Text 2

[/code]

bsp: dl.getdropbox.com/u/615415/div.html

9

@pumba1111: “Funktioniert nicht” ist keine brauchbare Problembeschreibung.
Wenn du nicht in der Lage bist, mehr als das zu liefern - dann solltest du wenigstens Online-Beispiele bereitstellen (vollständige, valide), an hand derer man das ganze nachvollziehen kann.

Und eine Methode getElementsByClassName gibt’s in modernern Browsern schon build-in; für die, die es noch nicht kennen, gibt es fertige Workarounds - da braucht man sich also auch nichts für selber basteln.