Durch klick auf ein Wort soll etwas passieren

[Nico]

Hallo,

ich benötige eure Hilfe bei einem JavaScript Code, vielleicht könnt ihr mir helfen.

Habe ein Div das erst eingeblendet werden soll, wenn man auf einen Text klickt, wenn es aufgeklappt ist und man wieder auf den Text klickt sollte es wieder zu gehen. Der Text selber sollte sich von öffnen in schließen ändern.

Keine Ahnung wie viel Arbeit das ist. Wäre für Hilfe wirklich sehr dankbar. Kenne mich leider nur sehr wenig mit JavaScript aus. jQuery habe ich zur Verfügung, die kommt von einem Google Server.

Vielleicht ist ja auch mit CSS möglich, was mir natürlich lieber wäre, aber ist kein muss.

[Nico]

Hallo,

hab bei Google etwas gefunden

  
$('.show').click(function() {  
$('.hidden').slideToggle();  
$('.shown').slideToggle();  
$(this).text($(this).text() == '+' ? 'Zuklappen' : '+');  
});  

  
<div>  
   sichtbarer block  
</div>  
  
<div style="text-decoration: overline; font-size: 10px; text-align: center;  
width: 5px; height: 5px; float: left; padding-right: 5px;">  
   <a href="#" class="show">+</a>  
</div>  
  
<div style="padding-left: 4px; border: 1px dotted grey; width: 5px;  
border-right: 0px; min-height: 10px; float:left">  
   <div style="display: none; width: 400px;" class="hidden">  
      versteckter Block 1 - versteckter Block 2 <br> versteckter Block 3  
   </div>  
</div>  

Ob das gut oder schlecht ist kann ich nicht sage aber es funktioniert. Wenn ihr noch etwas anders habt, könnt ihr es mir ja schreiben.

[Camping_RIDER]

Aloha ;)

Ob das gut oder schlecht ist kann ich nicht sage aber es funktioniert. Wenn ihr noch etwas anders habt, könnt ihr es mir ja schreiben.

Nur als Ergänzung - für bewusste jQuery-Abstinenzler wie mich: Das geht auch mit nativem Javascript. Dazu muss der Text per onclick-Eventhandler mit einer Funktion verknüpft werden, die das entsprechende div-Element mit einem display-oder visivility-Wert versieht und den Textinhalt des angeklickten Elements ändert.

Es war auch vor jQuery schon möglich, solche Probleme mit Javascript zu lösen, um nicht zu sagen: jQuery kocht auch nur mit Wasser (äh, JavaScript). Natürlich gehts mit jQuery einfacher und unkomplizierter... Nur irgendwie hab ich keinen Spaß am Verwenden externer Bibliotheken :D Zumal auch natives JavaScript erheblich nachrüstet...

Grüße,

RIDER

[Nico]

Hallo,

ich hab die Funktion nochmals getestet, auf anderen Seiten wird es schön hoch und runter gefahren bei mir springt die Seite richtig und der Effekt mit dem Hoch und Runterfahren ist leider nicht vorhanden.

Aus und einblenden geht! An was könnte das liegen?

[Nico]

Hallo,

sorry ich war zu schnell. Muss den <a href...> raus nehmen dadurch kommt das springen, hab es nun so umgesetzt und es funktioniert.

  
 <span class="show">Hier klicken, um eine Adresse einzugeben</span>  

  
		 $('.show').click(function() {  
			 $('.hidden').slideToggle();  
			 $('.shown').slideToggle();  
			 $(this).text($(this).text() == 'Hier klicken, um eine Adresse einzugeben' ? 'Doch keine Adresse angeben' : 'Hier klicken, um eine Adresse einzugeben');  
        });  

[Gunnar Bittersmann]

@@Nico:

nuqneH

sorry ich war zu schnell. Muss den <a href...> raus nehmen dadurch kommt das springen

Ja, href="#" führt zum Seitenanfang. Wenn damit kein Link zum Seitenanfang gemeint ist, ist <a href="#"> im HTML falsch; es sollte ein Button sein.

Ein Button, kein span! Denn …

hab es nun so umgesetzt und es funktioniert.
<span class="show">Hier klicken, um eine Adresse einzugeben</span>

Nein, es funktioniert eben NICHT!!

Beim span kann man mit Tastaturbedienung keine Funktion auslösen, geschweige denn über Tab-Taste überhaupt dorthin navigieren. Nicht alle Nutzer haben eine Maus zu Verfügung, deshalb muss eine Webseite immer auch über Tastatur bedienbar sein.

Nun könnte man zwar die nicht vorhandene Funktionalität fürs span-Element nachrüsten, dies ist aber aufwändig. Und unsinnig, denn es gibt ja ein natives HTML-Element, das die Funktion bereits bietet: button.

In ARIA examples wird unter 3 Progressive collapsibles beschrieben, wie man Auf- und Zuklappen barrierefrei umsetzt.

Qapla'

[Nico]

Hallo,

Nein, es funktioniert eben NICHT!!

da muss ich dir widersprechen, es funktioniert sehr gut. Ganz ehrlich User die ohne Maus unterwegs sind, die sind so etwas gewohnt dass einige Sachen nicht gehen und sind mir egal. Meine Zielgruppe sind jüngere User und glaube mir, die haben ALLE eine Maus an ihrem Rechner.

[Gunnar Bittersmann]

@@Nico:

nuqneH

Ganz ehrlich User die ohne Maus unterwegs sind, die sind so etwas gewohnt dass einige Sachen nicht gehen und sind mir egal.

Dann schreib doch gleich auf deine Seite „Behinderte haben auf meiner Seite nichts zu suchen!“

Dann könntest du allerdings auch gleich schreiben „Ich bin ein Arschloch.“

Ich glaub nicht, dass du das willst.

Qapla'

[MudGuard]

Hi,

Ganz ehrlich User die ohne Maus unterwegs sind, die sind so etwas gewohnt dass einige Sachen nicht gehen und sind mir egal.
Dann schreib doch gleich auf deine Seite „Behinderte haben auf meiner Seite nichts zu suchen!“

Viel schlimmer: es werden ja auch viele Nicht-Behinderte dadurch abgehalten, das span zu klicken.

Ich sehe täglich viele nicht-behinderte Menschen (auch junge User), die im Internet unterwegs sind, und dabei keine Maus nutzen, weil keine am Gerät angeschlossen ist.

Ich sage nur: Smartphone + Tablet.

(Ich find's erstaunlich, daß N. die egal sind, aber das sei ihm überlassen)

cu,
Andreas