Inhalte nach oben/unten verschieben

[Sandra]

Hi
hat jemand ein Script für mich, mit dem ich folgendes realisieren kann:
ich möchte eine Anwender Oberfläche mit JavaScript in HTML erstellen.
im Browserwindow sind  3 Themenbereiche, die untereinander angeordnet werden sollen.
Unter jedem dieser Themenbereiche befinden sich Textfiels, Radiobuttons, Checkboxes usw.
Damit man nich so viel scrollen muss, möchte ich, dass man jedes dieser 3 Themenbereiche einzeln schliessen kann, so dass diese Checkboxes... wieder verschwinden und DAS SICH BEIM SCHLIESSEN DAS DAS DARUNTER LIEGENDE KAPITEL AUTOMATISCH NACH OBEN NACHRÜCKT:
öffnet man dann z.b wieder den mittlere oder obere Themenbereiche, SOLL SICH Der DARUNTER BEFINDENDE Themenbereiche AUTOMATISCH NACH UNTEN MIT VERSCHIEBEN.
es soll durch das Aufklappen eines Themenbereiches also der darunter liegende nicht überdeckt werden, sondern nach unten versetzt werden.
Es wäre ganz toll, wenn mir jemand helfen könnte.
vielen Dank
Sandra

[Dieter Raber]

Hallo Sandra,

das ist eigentlich recht simpel.
<div id="thema_1"> dieser container enthaelt ueberschrift 1 und einen link zum schliessen
  <div id="text_zu_thema_1" style="display:block"> hier steht dein text zu thema 1
  </div>
</div>
Jedes Thema steht also in geschachtelten divs. Jetzt brauchst du ein kleines Javascript, das alle divs getElementsByTagName abfaengt und bei allen den style auf display:none setzt. Danach setzt es den div, den du sehen willst auf display:block. Im wahren Leben ist das ein klein wenig komplizierter, aber das ist das System. Schau Dir mal den Shop bei <harponline.de> an, die Navigation funktioniert nach dem gleichen Prinzip;

Dieter

[sandra]

Hallo Dieter,
vielen dank,probiere ich gleich mal aus
Grüße Sandra

[Sandra]

Hi Daniel,
schade dass du dieses script nicht zur Hand hast.
Auf der Mundharmonika Seite ist es nämlich nicht verfügbar.
viele Grüße
Sandra

[Dieter Raber]

Hallo,

function display_links(sender) {
   var cont = document.getElementById(sender.id+"_cont");
   var tag = document.getElementsByTagName('div');
   for (i=0;i<tag.length;i++) {
     if (tag[i].id.indexOf('_cont')!=-1){
       tag[i].style.display='none';
     }
   }
   cont.style.display='block'
}

In diesem Fall muessen deine id's so aussehen:
<div id="thema_1">fuer den aeusseren div
und id="thema_1_cont" fuer den inneren

Dieter