Collapse/Expand-Div

Sero

Hi,

habe unter diesem Link mal ein Collapse/Expand-Div zusammengebastelt:
http://www.sebastianrost.de/test/html/collapse.html.

DAs GAnze funktioniert auf Java Script Basis, siehe hier:

function switchMenu(obj) {

	var el = document.getElementById(obj);

	if ( el.style.display != "none" ) {

		el.style.display = 'none';

	}

	else {

		el.style.display = '';

	}

}

Beim Laden der Seite wird die Liste im erweiterten Zustand angezeigt
Bei Klick auf den roten Pfeil (rechts) wird die die aktuelle Zeile reduziert. Ich möchte allerdings, das die Liste im reduzierten Zustand geladen wird und bei Klick auf den Pfeil erweitert werden kann.

Vielen Dank für eure Vorschläge

Sero

Intermedia

Moin,

du mußt die betreffenden DIV mit display:none; vorbelegen.

Gruß Sven

Sero

He Sven,

danke, es hat funktioniert. Ich musste allerdings in der .js noch folgendes anpassen:

if ( el.style.display != "block" ) {

		el.style.display = 'block';

"none" habe ich durch "block" ersetzt.

Zusätzlich möchte noch einen Link "Alles Erweitern/Reduzieren" einbauen und habe folgendes Skript gefunden, leider bekomme ich das nicht zum laufen

function collapseAll(objs) {

var i;

for (i=0;iobjs.style.display = 'none';

}

}

function pageLoad() {

collapseAll($('myDiv1','myDiv2','myDiv3'));

}

addEvent(window,'load',pageLoad);

Ich denke, ich habe etwas in meiner html falsch gemacht. Schaut mal bitte rein.

Danke
Sero

Intermedia

Moin,

anknüpfend an deinen Ansatz könnte man es so realisieren:

function collapseAll(objs) {
var j;
var was;

for (j=0;j
if(!document.getElementById(objs[j]).style.display || document.getElementById(objs[j]).style.display == 'block') was= 'none'; else was = 'block';

document.getElementById(objs[j]).style.display = was;
}
}
function pageLoad() {
collapseAll(Array('myDiv1','myDiv2','myDiv3'));
}

ich würde sowas mit einer Funktion machen.

Gruß Sven

Sero

Hi Sven,

danke für dein Skript. Ich habs mal getestet, aber es scheint nicht zu funktionieren bei mir. Ich denke mal es liegt an der Einbindung in die html. Könntest du mir dahingehend nochmals helfen.
So habe ich es versucht:
alle erweitern

Danke Sero

Intermedia

Moin,

ist keine vernüftige Fehlerbeschreibung. Wenn du mal die Fehlerkonsole des FF verwenden würdest, stehen dort bestimmt die Fehlermeldungen auch drin

Du rufst die falsche Funktion auf. Das ist die richtige: pageLoad()

Gruß Sven

Sero

Danke, es funktioniert jetzt, es lag an der einbindung der funktion.

Gruß Sero

Sero

Hallo,

ich habe nocheinmal eine Frage zu diesem Thema. Hier auch der dazugehörige Link:
http://www.sebastianrost.de/test/html/test-collapse.html
Wie kann ich auf einfache Art und Weise erreichen (basierend auf meinem Skipt), dass sich das Icon (kleine Pfeil rechts) je nach Zustand verändert - im zusammengeklappten Zustand ist das Icon ein Plussymbol und im erweiterten Zustand ein Minussymbol. Ich habe schon einige Beispiele im Netz gefunden, aber der Quellcode dafür scheint mir ewig lang zu sein.
Anbei das Skript für mein Test-collapse:

// Collapse and Expand

function switchMenu(obj) {
var el = document.getElementById(obj);
if ( el.style.display != "block" ) {
el.style.display = 'block';
}
else {
el.style.display = '';
}
}

function collapseAll(objs) {
var j; var was; for (j=0;j if(!document.getElementById(objs[j]).style.display || document.getElementById(objs[j]).style.display == 'block') was= 'none'; else was = 'block';
document.getElementById(objs[j]).style.display = was;
} } function pageLoad() {
collapseAll(Array('expand_1','expand_2','expand_3','expand_4','expand_5')); }

Schöne Grüße und vielen Dank im Voraus für eure Ratschläge
Sero

SabineP

Hallo Sero,

hier gibts ein Beispiel:

http://cssglobe.com/post/940/list-expander

Demo:
http://www.cssglobe.com/lab/list_expander/01/

Sero

Hi Sabine,

danke für den link, das Beispiel ist echt gut. Ich habe es mal für meine Zwecke etwas angepasst, siehe hier:
http://www.sebastianrost.de/test/html/test-collapse.html
Eine Sache stört mich aber noch:
wie du siehst ist jede 2. Zeile ist grau hinterlegt. Allerdings habe ich diese Eigenschaft direkt im li tag zugewiesen und nicht über meine css. Das ist wirklich nicht optimal, aber ich konnte es nicht anders lösen.
Destweiteren habe ich versucht das PDF Symbol (Downloadlink) rechts in der Zeile anzuordnen, dabei habe ich ein Tabelle verwendet. Mittels div's, u.a. würde es auch gehen, aber diese Variante funktioniert für die gängigen Browser ganz gut.

Könnt ihr mir nochmal weiterhelfen bzw Ratschläge geben. Danke

Sero

SabineP

Hallo Sero,

>> wie du siehst ist jede 2. Zeile ist grau hinterlegt.
>> Allerdings habe ich diese Eigenschaft direkt im li tag zugewiesen und nicht über meine css.

Vielleicht klappt das auch mit einer Klasse (ungetestet).

vorher bzw. jetzt:

nachher:

.grau{background-color:#EFEFEF}

Sero

Hi Sabine,

das habe ich schon versucht, aber es funktioniert leider nicht auf diesem Weg. Hast du noch nen anderen Tip?

Danke, Sero

minou

Hallo Sero,

leider habe ich deine E-Mail Adresse auf dem NB, sitze aber am PC.
Ich habe dir das mit dem Hintergrund mal gemacht und auch ein Image, das du rechts ausrichten kannst, ist gesetzt. Brauchst dort also nur das richtige Bild anzugeben.
Das mit dem collapse und expand habe ich aussen vor gelassen, da hast du ja glaub ich schon Lösungen.

Also hier eine HTML Datei, die jede 2. Zeile anders "bemalt". Man könnte höchstens noch die Ausgabe über PHP machen und jedem zweiten Eintrag eine andere Farbe geben. Das ginge sehr einfach mit dem %-Operator (Restwert), oder du machst jede Zeile die gerade ist (z.B. 2:2=1 4:2=2 usw) anders.
Du kannst ja mal schauen; wenn du PHP auch noch einbeziehst, müssten einige Ausgaben auf eben diese Werte in einer Schleife geprüft werden, dann würden Zeile 2,4,6,8 automatisch anders formatiert...
Vor allem bräuchtest du dich dann nicht mehr um Formatierungen zu kümmern. Die Werte würde ich dann aber auch entweder in XML oder einer Datenbank ablegen.

So jetzt aber mal das Skript :-)

Titel

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur tincidunt turpis sed nunc. Pellentesque porttitor sagittis nisl. Etiam dictum purus vitae lorem. Ut ipsum orci, feugiat sit amet, luctus vitae, sodales quis, nibh. Sed vel mi. Ut vehicula nisi quis pede. Duis porta, lacus a pellentesque sodales, ligula sem tempor magna, ac mattis tortor mi vel odio.

2. Titel

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur tincidunt turpis sed nunc. Pellentesque porttitor sagittis nisl. Etiam dictum purus vitae lorem. Ut ipsum orci, feugiat sit amet, luctus vitae, sodales quis, nibh. Sed vel mi. Ut vehiculaquis
pede. Duis porta, lacus a pellentesque sodales, ligula sem tempor magna, ac mattis tortor mi vel odio.

Titel

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur tincidunt turpis sed nunc. Pellentesque porttitor sagittis nisl. Etiam dictum purus vitae lorem. Ut ipsum orci, feugiat sit amet, luctus vitae, sodales quis, nibh. Sed vel mi. Ut vehicula nisi quis pede. Duis porta, lacus a pellentesque sodales, ligula sem tempor magna, ac mattis tortor mi vel odio.

2. Titel

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur tincidunt turpis sed nunc. Pellentesque porttitor sagittis nisl. Etiam dictum purus vitae lorem. Ut ipsum orci, feugiat sit amet, luctus vitae, sodales quis, nibh. Sed vel mi. Ut vehiculaquis
pede. Duis porta, lacus a pellentesque sodales, ligula sem tempor magna, ac mattis tortor mi vel odio.

P.S. es läuft auch im FF, da ging es ja nicht richtig, auch der IE7 ist getestet.

Gruss

minou