Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „Textüberschrift bei Klick erscheint drunter Text?“

mave

Nicht mehr ganz neu hier

Hallo, ich würde gerne mal wissen wie das funktioniert... man hat ein paar Überschriften... zum Beispiel:

- Text 1
- Text 2
- Text 3


Wenn nun jemand auf Text 1 zum Beispiel klickt, sollte es so aussehen:

- Text 1
Der Text von Text 1

- Text 2
- Text 3


Und wenn nun Text 2 geklickt wird sollte Text 1 wieder geschlossen werden, also so:

- Text 1
- Text 2

Der Text von Text 2

- Text 3

Wie nennt man sowas? Dropdowntext? Wie kann man das realisieren? kennst jemand vielleicht ein tutorial dafür? Hab leider nix gefunden...
 

Christian

verpeilt & verschallert

AW: Textüberschrift bei Klick erscheint drunter Text?

also ich weiß, dass es sowas mal in Dreamweaver mal sowas gibt / gab, wie auch immer. Jedenfalls hab ich dir mal ein Javascript dafür zusammengeschustert:
Code:
<html>
 <head>
  <script>
   var d = document;
   function flap( id ){
   	var description_list = d.getElementsByName('description_');
   	
   	for( var i=0; i<=description_list.length-1; i++){
   		var desc = description_list[i];
   		var desc_id = desc.id;
   		
   		if(desc_id==id){
   			desc.style.display = 'block';
   		}else{
   			desc.style.display = 'none';
   		}
   	}
   }
  </script>
 </head>
 <body>
  <div id="menue">
   
  <!--Menuepunkt 1-->
  <div>
    <b><a href="javascript:;" onClick="flap('1');">Hauptext 1</b></a>
    <div name="description_" id="1" style="display:none;">
     balblabalblasdbalksd<br />
     asdiahosi
     enemenemuh
    </div>
   </div>
   
   <!--Menuepunkt 2-->
   <div>
    <b><a href="javascript:;" onClick="flap('2');">Hauptext 2</b></a>
    <div name="description_" id="2" style="display:none;">
     balblabalblasdbalksd<br />
     asdiahosi
     enemenemuh
    </div>
   </div>
   
   <!--Menuepunkt 3-->
   <div>
    <b><a href="javascript:;" onClick="flap('3');">Hauptext 3</b></a>
    <div name="description_" id="3" style="display:none;">
     balblabalblasdbalksd<br />
     asdiahosi
     enemenemuh
    </div>
   </div>

  </div>
 </body>
</html>
Wichtig hier dran ist nur das Javascript selber oben im <head>-Tag und dass der Aufbau eines Textes der aufgeklappt / zugeklappt werden soll so ist

Code:
<div name="description_" id="2">
name="description_" bleibt immer! gleich nur id="" ist variabel.
Aufklappen kannst Du eine ID wenn du Die Javascriptfunktion flap() benutzt.
Sprich flap("1"); zum Bleistift.


Wenn Du noch Fragen hast immer Raus


LG
Christian
 

NiAlMa

Nicht mehr ganz neu hier

AW: Textüberschrift bei Klick erscheint drunter Text?

das Ganze als Javascript zu verwirklichen ist die einfachste Art
 

mave

Nicht mehr ganz neu hier

AW: Textüberschrift bei Klick erscheint drunter Text?

Hm hab das noch bischen umgeschrieben, funktioniert soweit auch ganz gut, blos irgendwie geht es im Internet Explorer nicht... warum???
 

stb_87

Web-Sheriff - ohne Bild

AW: Textüberschrift bei Klick erscheint drunter Text?

Welche Version vom Internet Explorer?

Zeig doch mal deinen überarbeiteten Quelltext bzw. nen Link dazu!
 

mave

Nicht mehr ganz neu hier

AW: Textüberschrift bei Klick erscheint drunter Text?

Kannst auch den hier gleich nehmen da funktioniert es auch nicht... Versteh halt nicht das jeder Browser damit umgehen kann ausser IE... habs bisher nur mit der 7er probiert...

<>
var d = document;
function flap( id ){
var description_list = d.getElementsByName('description_');

for( var i=0; i<=description_list.length-1; i++){
var desc = description_list;
var desc_id = desc.id;

if(desc_id==id){
desc.style.display = 'block';
}else{
desc.style.display = 'none';
}
}
}

</script>

<!--Menuepunkt 1-->
<div>
<b><a href="javascript:;" onClick="flap('1');">Hauptext 1</b></a>
<div name="description_" id="1" style=":none;">
balblabalblasdbalksd<br />
asdiahosi
enemenemuh
</div>
</div>
 
Zuletzt bearbeitet:

Christian

verpeilt & verschallert

AW: Textüberschrift bei Klick erscheint drunter Text?

ah ok... Das liegt mit der Kompatibilität der Browser mit der Funktion getElementById(); zusammen.
Ich schau mir das nachher nochmal an und schreib das X-Browser Kompatibel um
 

gp812

Newbster

AW: Textüberschrift bei Klick erscheint drunter Text?

Das nennt man Show & Hide.
ein Tutorial.
Man muss nur noch die Funktion etwas verändern, damit es andere Div's schließt.
 

blackout

Schaf im Wolfspelz

AW: Textüberschrift bei Klick erscheint drunter Text?

Zur Not geht's auch per CSS per "a:active y { visibility: visible; }", das reicht zumindest für ne JavaScript-Alternative. Ich kann :active und :focus nie unterscheiden, kann also sein dass ich mich in der Pseudoklasse irre.
 

mave

Nicht mehr ganz neu hier

AW: Textüberschrift bei Klick erscheint drunter Text?

Hab es nun endlich hinbekommen... Funktion Javascript über IDs und paar Zeilen CSS... schwere Geburt... anscheinend hat IE Probleme mit getElementByName...
 

Christian

verpeilt & verschallert

AW: Textüberschrift bei Klick erscheint drunter Text?

Ok, hab eine globale Lösung gefunden, das Problem lag darin, dass IE die Funktion getElementsByName() nur in Formularen erkennt.... Verrat mir einer mal warum, aber nunja.

Code:
<html>
 <head>
  <script>
   var d = document;
   
   function set_display( id, arg ){
   		if(d.getElementById){
   			d.getElementById(id).style.display = arg;
   			return true;
   		}
   		if(d.all){
   			d.all(id).style.display = arg;
   			return true;
   		}
   		if(d.layers){
   			d.layers(id).style.display = arg;
   			return true;
   		}
   		return false;
   }
   function flap( id ){
   	var description_list = d.getElementsByName('description_');
   	for( var i=0; i<=description_list.length-1; i++){
   		var desc = description_list[i];
   		var desc_id = desc.value;
   		if(desc_id==id){
   			set_display(desc_id, 'block'); 
   		}else{
   			set_display(desc_id, 'none'); 
   		}
   	}
   }
  </script>
 </head>
 <body>
  <div id="menue">
   
  <form name="menue"> <!-- Workaround Internet Explorer-->
	  <!--Menuepunkt 1-->
	  <div>
	    <b><a href="javascript:;" onClick="flap('1');">Hauptext 1</b></a>
	    <input type="hidden" name="description_" value="1">
	    <div id="1" style="display:none;">
	     balblabalblasdbalksd<br />
	     asdiahosi
	     enemenemuh
	    </div>
	   </div>
	   
	   <!--Menuepunkt 2-->
	   <div>
	    <b><a href="javascript:;" onClick="flap('2');">Hauptext 2</b></a>
	    <input type="hidden" name="description_" value="2">
	    <div id="2" style="display:none;">
	     balblabalblasdbalksd<br />
	     asdiahosi
	     enemenemuh
	    </div>
	   </div>
	   
	   <!--Menuepunkt 3-->
	   <div>
	    <b><a href="javascript:;" onClick="flap('3');">Hauptext 3</b></a>
	    <input type="hidden" name="description_" value="3">
	    <div id="3" style="display:none;">
	     balblabalblasdbalksd<br />
	     asdiahosi
	     enemenemuh
	    </div>
	   </div>
   </form>

  </div>
 </body>
</html>

Worauf Du nun achten musst?
aufjeden Fall auf das <Form> Tag um dein Menü herum, auch wenn es keinem Zweck dienlich ist, außer dass IE es erkennen kann. Außerdem muss jeder Menüpunkt so aussehen:

Code:
	   <!--Menuepunkt 3-->
	   <div>
	    <b><a href="javascript:;" onClick="flap('3');">Hauptext 3</b></a>
	    <input type="hidden" name="description_" value="3">
	    <div id="3" style="display:none;">
	     balblabalblasdbalksd<br />
	     asdiahosi
	     enemenemuh
	    </div>
	   </div>

Ich hoffe ich konnte Dir ein wenig weiterhelfen,


MfG
Christian
 

mave

Nicht mehr ganz neu hier

AW: Textüberschrift bei Klick erscheint drunter Text?

Das hier reicht eigentlich vollkommen:

Code:
[SIZE=3][FONT=Calibri]<script type="text/javascript">[/FONT][/SIZE]
[SIZE=3][FONT=Calibri]<!--[/FONT][/SIZE]
[SIZE=3][FONT=Calibri]function show(id)[/FONT][/SIZE]
[SIZE=3][FONT=Calibri]{[/FONT][/SIZE]
[SIZE=3][FONT=Calibri] var ids = new Array('div1','div2','div3')[/FONT][/SIZE]
[SIZE=3][FONT=Calibri] for(i=0;i<ids.length;i++)[/FONT][/SIZE]
[SIZE=3][FONT=Calibri] {[/FONT][/SIZE]
[SIZE=3][FONT=Calibri]   document.getElementById(ids[i]).style.display = 'none'[/FONT][/SIZE]
[SIZE=3][FONT=Calibri] }[/FONT][/SIZE]
[SIZE=3][FONT=Calibri] document.getElementById(id).style.display = 'block'[/FONT][/SIZE]
[SIZE=3][FONT=Calibri]}[/FONT][/SIZE]
[SIZE=3][FONT=Calibri]-->[/FONT][/SIZE]
[SIZE=3][FONT=Calibri]</script>[/FONT][/SIZE]
[SIZE=3][FONT=Calibri]<style type="text/css">[/FONT][/SIZE]
[SIZE=3][FONT=Calibri]<!--[/FONT][/SIZE]
[SIZE=3][FONT=Calibri]#div1,#div2,#div3[/FONT][/SIZE]
[SIZE=3][FONT=Calibri]{[/FONT][/SIZE]
[SIZE=3][FONT=Calibri] display:none;[/FONT][/SIZE]
[SIZE=3][FONT=Calibri]}[/FONT][/SIZE]
[SIZE=3][FONT=Calibri]-->[/FONT][/SIZE]
[SIZE=3][FONT=Calibri]</style>[/FONT][/SIZE]
 

Christian

verpeilt & verschallert

AW: Textüberschrift bei Klick erscheint drunter Text?

Na ok, wenn Du meinst, dass es dynamisch genug ist?
Wollt ja nur helfen:p
Der Nachteil Deiner Lösung liegt aber klar auf der Hand:
Du musst jedes Element, was ein oder ausgeblendet werden soll, vorher oben in der Funktion angeben


PS:
Außerdem kommt nicht jeder Browser mit der Funktion getElementById zurecht
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Statistik des Forums

Themen
174.478
Beiträge
2.577.990
Mitglieder
65.965
Neuestes Mitglied
Bina
Oben