CSS Webdesign: DIV-Boxen auf/zu klappen

WulfmanGER · 28. März 2011

Hi

ich suche eine möglichkeiten DIV-Boxen auf/zuzuklappen (oder eine alternative zu DIV). Ich hab im Netz einiges gefunden - kein Ding - allerdings klappt das bei einer Box super - bei mehreren nicht.

Es geht um folgendes Konstrukt:
Ich lese z.b. 50 Datensätze aus einer mySQL. In der Ausgabe setze ich jeden Datensatz in eine DIV-Box. Die soll fix sein - kein Problem. Jetzt gibt es aber zu jeden der 50 Datensätze noch je 2 weitere Datensätze die in dieser einen Box angezeigt werden sollen. Aufgrund der Menge möchte ich diese nur bei Bedarf aufklappen - jedes für sich - nicht alle auf einmal.

Das Problem scheint hier aber das Adressieren zu sein. Ich hatte ein Script wo zwar über jede Box ein Schalter war - aber hab ich den gedrückt, ging NUR die erste Box auf - egal wo ich geklickt habe... Wie gesagt: Problem ist erkannt - Adressierung der Boxen - aber wie mache ich das richtig?

Also kurzfassung: 3 Boxen
Box 1: Fest - kein Problem
Box 2: Inhalt 1
Box 3: Inhalt 2

Box 2 und 3 sind unabhängig von einander zu öffnen - für jeden der 50 Datensätze auf dieser Seite. Wie mache ich das?

Gruß
Wulfman

marcOcram · 28. März 2011

Code:

<?php
$zaehler = 0;
while(bla = bla){
?>
<div>
	<?php echo $bla ?> - <a href="javascript:oeffne('nummer_<?php echo $zaehler ?>')">Öffne Details</a>
	<div id="nummer_<?php echo $zaehler ?>">
		Details zum Eintrag
	</div>
<div>
<?php
	$zaehler++;
}
?>

Du zählst bei jedem Schleifendurchgang einen Zähler hoch, diesen setzt du jeweils in eine Funktion zum Öffnen des Div's und in die ID des Divs. Dadurch kannst du jedes Div einfach öffnen

beten · 28. März 2011

Hey.

Wenn ich dich richtig verstanden habe, dann wuerde ich einfach Box 2 & Box 3 ne Klasse zuordnen und dann mit jQuery oder so den Inhalt jeweils zeigen/verstecken.

EDIT:
z.B. Expand-collapse toggle panel (div) using jquery

2fastHunter · 28. März 2011

Schau dir mal JQuery an. Damit kann man ganz simpel alles in einer Page finden, was man will. Damit kannst du dann auch die Inhalte der zu öffnenden Boxen erst beim Öffnen nachladen wenn du dafür einen Webservice anlegst. Ist alles recht simpel. Du kannst sogar eine Animation an das öffnende Div packen. Viel spaß damit

mercsen · 28. März 2011

Keine Klasse, eine ID, damit machst du sie unterscheidbar !
Und die funktion zum öffnen muss dann als parameter eine ID annehmen um genau das DIv mit der ID zu öffnen,
oder aber oeffne(this) und dann die id auslesen.

wobei das Javascript und kein CSS ist.

charmin · 28. März 2011

und wenn dir JQuery nicht gefällt gäbe es auch noch Prototype und Scritaculous.

Laci69 · 28. März 2011

Oder so etwa:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>New Document</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
</head>
<body>
<script>

function OeffnenSchliessen(aktuelleDiv)
{
if (aktuelleDiv.style.height=='80px')
{
aktuelleDiv.style.height='400px';
}
else
{
aktuelleDiv.style.height='80px';
}
}

</script>

<div style="height: 80px; width: 200px; border: 1px solid red;" onclick="OeffnenSchliessen(this)"></div>
<div style="height: 80px; width: 200px; border: 1px solid red;" onclick="OeffnenSchliessen(this)"></div>
<div style="height: 80px; width: 200px; border: 1px solid red;" onclick="OeffnenSchliessen(this)"></div>
</body>
</html>

beten · 28. März 2011

oder Mootools

@Mercsen
Total unnuetz & ineffizient noch dazu. Schau dir mal den Link an, den ich gepostet hab.

nexus76 · 28. März 2011

schau Dir mal das an.
entspricht das Deiner Vorstellung? Das "adressieren" funkioniert mit den CSS Klassen.

WulfmanGER · 28. März 2011

beten schrieb:
Hey.

Wenn ich dich richtig verstanden habe, dann wuerde ich einfach Box 2 & Box 3 ne Klasse zuordnen und dann mit jQuery oder so den Inhalt jeweils zeigen/verstecken.

EDIT:
z.B. Expand-collapse toggle panel (div) using jquery

das hab ich mal probiert - ausser das jetzt mein ganzes Design im Eimer ist

[wobei das jetzt iphone-kompatibler ist als meine Variante *G*], macht es das was ich will. Das Design muss ich jetzt mal wieder korigieren

[das kommt davon wenn man Blind copy&paste macht]

@2fastHunter: bei bedarf nachladen wäre auch gut - dafür muss ich aber erstmal das ganze scriptgedöns hinter dem inhalt umbauen. Das heb ich mir für v2 auf

Gruß

Suche

CSS Webdesign: DIV-Boxen auf/zu klappen

WulfmanGER

Commander

marcOcram

Lieutenant

beten

Lt. Junior Grade

2fastHunter

Gast

mercsen

Lt. Commander

charmin

Admiral

Laci69

Cadet 1st Year

beten

Lt. Junior Grade

nexus76

Gast

WulfmanGER

Commander

Ähnliche Themen