Collapse/Expand-Div

[Gast] Foren Web allgemein HTML und CSS / Stylesheets Collapse/Expand-Div

Web allgemein

Themen

Beiträge

Moderatoren

Letzter Beitrag

HTML und CSS / Stylesheets

1193

6413

FSt

19. Dez 2022, 21:28

Vitus

Sero

Beiträge gesamt: 143

7. Mär 2008, 08:23
Beitrag # 1 von 13
Bewertung:
(10122 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

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:

Code

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

Collapse/Expand-Div

Intermedia

Beiträge gesamt: 1287

7. Mär 2008, 08:50
Beitrag # 2 von 13
Beitrag ID: #340517
Bewertung:
(10117 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Moin,

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

Gruß Sven

als Antwort auf: [#340512]

Collapse/Expand-Div

Sero

Beiträge gesamt: 143

8. Mär 2008, 03:12
Beitrag # 3 von 13
Beitrag ID: #340661
Bewertung:
(10093 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

He Sven,

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

Code

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

Code

function collapseAll(objs) { 
var i; 
for (i=0;i<objs.length;i++ ) { 
objs[i].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

als Antwort auf: [#340517]

Collapse/Expand-Div

Intermedia

Beiträge gesamt: 1287

8. Mär 2008, 09:40
Beitrag # 4 von 13
Beitrag ID: #340664
Bewertung:
(10083 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Moin,

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

Code

function collapseAll(objs) {  
var j;  
var was; 
 
for (j=0;j<objs.length;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

als Antwort auf: [#340661]

Collapse/Expand-Div

Sero

Beiträge gesamt: 143

9. Mär 2008, 01:37
Beitrag # 5 von 13
Beitrag ID: #340710
Bewertung:
(10062 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

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:

Code

<a style="cursor:pointer;" onclick="collapseAll('');" title="alle erweitern">alle erweitern&nbsp;&nbsp; 
         <img src="../bilder/sym_arrow_down.gif" width="9" height="9" border="0" alt="alle erweitern"></a>

Danke Sero

als Antwort auf: [#340664]

Collapse/Expand-Div

Intermedia

Beiträge gesamt: 1287

9. Mär 2008, 09:11
Beitrag # 6 von 13
Beitrag ID: #340713
Bewertung:
(10039 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Moin,

Zitat ...aber es scheint nicht zu funktionieren

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

als Antwort auf: [#340710]

Collapse/Expand-Div

Sero

Beiträge gesamt: 143

10. Mär 2008, 01:49
Beitrag # 7 von 13
Beitrag ID: #340782
Bewertung:
(10019 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

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

Gruß Sero

als Antwort auf: [#340713]

Collapse/Expand-Div

Sero

Beiträge gesamt: 143

25. Apr 2008, 05:58
Beitrag # 8 von 13
Beitrag ID: #347924
Bewertung:
(9651 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Hallo,

ich habe nocheinmal eine Frage zu diesem Thema. Hier auch der dazugehörige Link:
http://www.sebastianrost.de/...l/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:

Code

// 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<objs.length;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

als Antwort auf: [#340782]

Collapse/Expand-Div

SabineP

Beiträge gesamt: 7586

25. Apr 2008, 08:38
Beitrag # 9 von 13
Beitrag ID: #347931
Bewertung:
(9627 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Hallo Sero,

hier gibts ein Beispiel:

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

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

als Antwort auf: [#347924]

Collapse/Expand-Div

Sero

Beiträge gesamt: 143

26. Apr 2008, 22:29
Beitrag # 10 von 13
Beitrag ID: #348179
Bewertung:
(9573 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

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/...l/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

als Antwort auf: [#347931]

Collapse/Expand-Div

SabineP

Beiträge gesamt: 7586

26. Apr 2008, 23:07
Beitrag # 11 von 13
Beitrag ID: #348182
Bewertung:
(9563 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

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:

<li style="background-color:#EFEFEF;">

nachher:

<li class="grau">

.grau{background-color:#EFEFEF}

als Antwort auf: [#348179]

Collapse/Expand-Div

Sero

Beiträge gesamt: 143

27. Apr 2008, 22:36
Beitrag # 12 von 13
Beitrag ID: #348235
Bewertung:
(9512 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Hi Sabine,

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

Danke, Sero

als Antwort auf: [#348182]

Collapse/Expand-Div

minou

Beiträge gesamt: 135

29. Apr 2008, 10:52
Beitrag # 13 von 13
Beitrag ID: #348451
Bewertung:
(9454 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

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 :-)

Code

<html> 
    <head> 
   <style type="text/css"> 
 
body, p, h3 { 
  padding: 0;  
  margin: 0; 
  display: inline; 
} 
 
 
div { 
    position-relative; 
    left: 0px; 
    top: 0px; 
    padding-right: 100px; 
    padding-left: 20px; 
    bottom: 0px;          /* Wahrscheinlich überflüssig */ 
    text-align: justify; 
    border-bottom: 1px dotted black;  
    font-family: Arial, Helvetica, Verdana, sans-serif; 
    font-size: 12px; 
  background-color: #cf0; 
}  
 
 
 
h3 {                    
    padding-left: 20px; 
    padding-top: 5px; 
    padding-bottom: 10px; 
    margin-top: 0; 
    margin-left: 10px; 
} 
 
/* Wahrscheinlich gesamtes div p überflüssig */              
div p {        
    text-align: justify; 
} 
 
img { 
    position: absolute; 
    margin-top: 8px; 
    right: 5px; 
    border: none; 
  
}  
 
div.zweite { 
    background-color: #ddd; 
} 
 
 
       
      </style> 
 
    </head> 
    <body> 
 
   
        <div> 
            <h3>Titel</h3> 
            <a href="#" title=""><img src="pfeil.gif" /></a><br /> 
            <p> 
                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. 
            </p> 
             
              
       
        </div> 
        <div class="zweite"> 
            <h3>2. Titel</h3> 
            <a href="#" title=""><img src="pfeil.gif" /></a><br /> 
            <p> 
                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> 
       
       
             
        </div> 
               <div> 
            <h3>Titel</h3> 
            <a href="#" title=""><img src="pfeil.gif" /></a><br /> 
            <p> 
                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. 
            </p> 
             
              
       
        </div> 
        <div class="zweite"> 
            <h3>2. Titel</h3> 
            <a href="#" title=""><img src="pfeil.gif" /></a><br /> 
            <p> 
                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> 
       
       
             
        </div> 
    </bod> 
</html>

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

Gruss

minou

als Antwort auf: [#348235]
(Dieser Beitrag wurde von minou am 29. Apr 2008, 11:11 geändert)

Aktuell

InDesign / Illustrator

axaio MadeToTag für Adobe InDesign 2024 verfügbar

| 12.10.2023

Weitere Events

Neuste Foreneinträge

Leerzeichen am Absatzende entfernen (AI2024 Win10)

Cookie-Overload??

Logo ï¿½ Strich- Farbkombination wie anzulegen?

Bild platzieren ï¿½ber Bridge (Indd19.0.1 Bridge14.0.1.137 WIN10)

Schrift eines Kommentars: wie erkennen?

Suche Programm fï¿½r Batch-Renaming

Bildschirmflackern beim Markieren von Texten

Ersatz fï¿½r Lintoype Fontexplorer Server

Skript PDF Export Seitenbereich definieren

Affinity Publisher 2.2.1, PDF erzeugen: das PDF zeigt keine Suchergebnisse an

Weitere Stellenangebote