[DHTML] Layer ein-/ausklappen

[kahles]

Hallo,

hat einer von euch einen Code Schnipsel parat, wie ich layer ein- und ausblenden kann? Sowas wie hier: https://diegesellschafter.de/projekt/ueber/ das ein-/ausklappen. So das sich die anderen Layer mit hin und herschieben.

Danke & Gruß

 

[SpecialsGuy]

Ich poste mal hier eine nette Funktion, die ich immer nutze, die sich sogar seitenübergreifend merkt, welche Layer ein- und ausgeklappt sind

function klappklapp(id){
  if(document.getElementById(id).style.display == 'none') {
    document.getElementById(id).style.display = 'block';
    setCookie(id, '0');
  } else {
    document.getElementById(id).style.display = 'none';
    setCookie(id, '1');
  }
}

function getCookie(Name){ 
  var re=new RegExp(Name+"=[^;]+", "i"); 
  if (document.cookie.match(re)) 
    return document.cookie.match(re)[0].split("=")[1];
  return "";
}

function setCookie(name, value){
  document.cookie = name+"="+value + ";path=/;expires=Thu, 31-Dec-2006 00:00:01 GMT";
}

Und im HTML-Code:

<a href="javascript:klappklapp('klappmich_layername')">Mach mal klapp klapp ...</a>

<div id="klappmich_layername" >Das ist Inhalt ... oder etwa nicht?</div>

<script type="text/javascript"><!--
  if (getCookie("klappmich_layername") == '1') { klappklapp('klappmich_layername'); }
//--></script>

Ich hoffe, das hilft weiter

 

[Malo]

DANKE! damit hats geklappt

*Update*
geht zwar alles, nur leider sind meine menüunterpunkte nun beim 1ten aufruf geöffnet. was muss ich einstellen damit sie beim aufrufen der page standardmässig geschlossen sind ?

 

[Johnson]

DANKE! damit hats geklappt

*Update*
geht zwar alles, nur leider sind meine menüunterpunkte nun beim 1ten aufruf geöffnet. was muss ich einstellen damit sie beim aufrufen der page standardmässig geschlossen sind ?

if (getCookie("klappmich_layername") == '1')

darf nicht nicht zutreffen.

Ich würde eventuell die getCookie-Funktion umbauen, dass sie dann, wenn du es brauchst nicht '1' (als String?) zurückgibt.

 

[Malo]

if (getCookie("klappmich_layername") == '1')

darf nicht nicht zutreffen.

Ich würde eventuell die getCookie-Funktion umbauen, dass sie dann, wenn du es brauchst nicht '1' (als String?) zurückgibt.

danke, aber
hmm bekomms irgendwie nich hin :/

hab übrigends 4 layer
die heißen
klappmich_layername
klappmich_layername2
klappmich_layername3
klappmich_layername4

 

[veers]

Schreib doch einfach ein style="display:none;" in dein Layer. Dann ist es am Anfang versteckt.

 

[Malo]

edit

 

[SpecialsGuy]

Einfach den letzten Code-Abschnitt hiermit ersetzen:

<script type="text/javascript"><!--
  if (getCookie("klappmich_layername") != '1') { klappklapp('klappmich_layername'); }
//--></script>

Dann sollte es klappen.

Alternativ, wie veers es gesagt hat, im Stylesheet es ändern UND folgender Code muss angepasst werden:

<script type="text/javascript"><!--
  if (getCookie("klappmich_layername") == '0') { klappklapp('klappmich_layername'); }
//--></script>

Die zweite Lösung inkl. Stylesheet würde ich bevorzugen, da man dort nicht ein Zuklappen beim Laden der Seite sieht.

 

[Malo]

Danke! ihr seit die besten! nun klappt alles wunderbar !!!!

 

[Goltergaul]

wie realisiert man eig dieses schöne "weiche" einklappen? Braucht man da ne Effekt-Lib?

 

[Johnson]

wie realisiert man eig dieses schöne "weiche" einklappen? Braucht man da ne Effekt-Lib?

Könnte eventuell damit oder einem div, das sich bewegt (selber bauen oder in der Referenz nachschauen, da gibts ziemlich sicher ne Funktion), realisieren (dann müsste der Menü-Punkt ganz unten den niedrigsten z-index haben usw.

Das fällt mir dazu momentan ein - gibt eventuell eine schönere / bessere Lösung.

Gruß

 

[SpecialsGuy]

Könnte eventuell damit oder einem div, das sich bewegt (selber bauen oder in der Referenz nachschauen, da gibts ziemlich sicher ne Funktion), realisieren (dann müsste der Menü-Punkt ganz unten den niedrigsten z-index haben usw.

Das fällt mir dazu momentan ein - gibt eventuell eine schönere / bessere Lösung.

Gruß

clip funktioniert aber bei absolut positionierte Elemente. Ich würde eher auf "height" und "overflow" im CSS zurückgreifen.

 

[kahles]

diese libary kann das ganz gut https://script.aculo.us auszuprobieren unter https://script.aculo.us/playground/test/run_functional_tests.html links im frame effects4 auswählen