kostenloser Webspace werbefrei: lima-city

Problem mit Text hidden machen

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   emissionsrechner

   

   emissionsrechner hat kostenlosen Webspace.

   18:46, 10.12.2011

   Ich hab folgendes Problem.
   
   Ich hab ein kleines FAQ eingerichtet mit viel Text.
   
   Aber ich will das man am Anfang nur die Fragen sieht (jeweils <p><strong>Frage</strong></p> sind die Fragen) und wenn man auf diese klickt soll der Text unten drunter herauskommen.
   
   Soweit so gut. Hab ich folgendes Beispiel:
   Ich will das den text von allen Tags <p class="split" id="textX"> zuerste nicht Sichtbar ist, aber wenn ich sie auf "visibility: hidden" setze verbrauchen diese <p> tags Ihre Fläche trotzdem.
   
   HTML
   

   <div>
   	<p><strong onclick="aufzu('text1')">
   		Frage1
   	</strong></p>
   	<p class="split" id="text1">
   		Lorem ipsum dolor sit amet
   	</p>
   </div>
   <div>
   	<p><strong onclick="aufzu('text2')">
   		Frage2
   	</strong></p>
   	<p class="split" id="text2">
   		consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua
   	</p>
   </div>
   <div>
   	<p><strong onclick="aufzu('text3')">
   		Frage3
   	</strong></p>
   	<p class="split" id="text3">
   		Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat.
   	</p>
   </div>

   
   Scriptaculous
   

   function aufzu(id) {
   		if($(id).style.display != "none") {
   			new Effect.BlindUp(id);
   		} else {
   			new Effect.BlindDown(id);
   		}
   	}

   
   
   Der Code mit Scruptaculous klappt wunderbar, aber die Texte sind halt am Anfang immer direkt Sichtbar!
   
   Irgendwelche Tipps? ;)

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. hackyourlife

   Moderator

   hackyourlife hat kostenlosen Webspace.

   19:29, 10.12.2011

   Verwende statt

   visibility: hidden

   einfach

   visibility: collapse;

4. Autor dieses Themas

   emissionsrechner

   

   emissionsrechner hat kostenlosen Webspace.

   19:37, 10.12.2011

   visibility: collapse;

   
   
   hat den gleichen Effekt wie "visiblity: hidden", der Text ist nicht mehr Sichtbar oder Auswählbar, aber die ganze Fläche wo der Text stand ist immernoch belegt.
   
   Ich will sowas wie ein Dropdown menü, wenn ich draufklicke kommt der Text runter rein ;)

5. c**********h

   19:38, 10.12.2011

   display: none;

   

6. anti-atomkraft

   

   anti-atomkraft hat kostenlosen Webspace.

   20:55, 10.12.2011

   Entweder display:none / display:block
   oder visibilty:hidden / visibility:visible
   
   Beitrag zuletzt geändert: 10.12.2011 20:55:41 von anti-atomkraft

7. t********g

   13:32, 11.12.2011

   Warum setzt du nicht einfach die Höhe beim nicht darstellen, bzw hover auf 0?
8. Autor dieses Themas

   emissionsrechner

   

   emissionsrechner hat kostenlosen Webspace.

   13:55, 11.12.2011

   Vielen Dank für die ganzen Ratschläge,
   
   das Problem lag darin, dass ich display:none in der css definiert habe.
   Danach konnte das irgendwie durch Javascript nicht mehr geändert werden. Und nichts funktionierte mehr.
   
   mit
   

   style="display:none"

   
   im Html code funktioniert das ganze auf einmal

9. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?