zimtstern: Auflistung Ein und Ausblenden

SELF-Forum

Auflistung Ein und Ausblenden

zimtstern
– Informationen zu den Bewertungsregeln

Hallo!

Ich bräuchte eure Hilfe. Und zwar geht es um eine Auflistungsmöglichkeit. Als Beispiel diese Seite und links unter "Infos&FAQs" zu finden.

Beispiel

Meine Frage nun.

Wie Programmier ich so etwas? Ich klicke eine Frage an und die Antwort öffnet sich. Klicke ich eine andere an schließt sich die alte und die neue öffnet sich.

Danke im Voraus

LG

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Auflistung Ein und Ausblenden

    1827
    – Informationen zu den Bewertungsregeln

    Schönen Sommeranfang,

    Wie Programmier ich so etwas? Ich klicke eine Frage an und die Antwort öffnet sich. Klicke ich eine andere an schließt sich die alte und die neue öffnet sich.

    Mit HTML, CSS und Javascript + Aufruf.
    HTML:
    Du programmierst die Frage und setzt danach ein Div ein, das die Antwort beinhaltet. Weiterhin musst du dem Div eine eindeutige id vergeben.
    CSS:
    Du stellst das Div auf display:none;. So sind sie nicht mehr sichtbar und werden "ignoriert".
    Javascript + Ausruf:
    Du programmierst eine Javascript funktion welcher du eine übertragene Div-ID übergeben kannst und es das Div mit der ID auf display:block; schaltet. Das Div ist sichtbar.
    Du musst in deinem HTML Dokument noch den Link zur Javascript-funktion sowie die zu übertragende DIV ID angeben.

    --
    suit: JavaScript ist nur das Schirmchen am Eisbecher - der Eisbecher muss auch ohne dem Schirmchen lecker sein.
    Selfcode: sh:( fo:) ch:| rl:( br:< n4:( ie:{ mo:| va:) de:> zu:) fl:( ss:) ls:> js:)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Auflistung Ein und Ausblenden

      zimtstern
      – Informationen zu den Bewertungsregeln

      Danke,

      das mit HTML und DIv ist mir klar. nur ich kenn mich bei Java Script überhaupt nicht aus. Wäre sehr nett und kuhl, wenn du mir diese Stelle vielleicht Programmieren könntest.

      Danke lg

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Auflistung Ein und Ausblenden

        1827
        – Informationen zu den Bewertungsregeln

        Schönen Sommeranfang,

        Ich programmiere dir gerne die Stelle, vorrausgesetzt du backst mir ein Eis.

        Das hier ist SELF[1]HTML, du bist doch bestimmt so self um Google zu benutzen?

        *[1] = Übersetzung von SELF -> Deutsch: SELBST.

        --
        suit: JavaScript ist nur das Schirmchen am Eisbecher - der Eisbecher muss auch ohne dem Schirmchen lecker sein.
        Selfcode: sh:( fo:) ch:| rl:( br:< n4:( ie:{ mo:| va:) de:> zu:) fl:( ss:) ls:> js:)
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

      2. Auflistung Ein und Ausblenden

        Gunther
        – Informationen zu den Bewertungsregeln

        Hi!

        nur ich kenn mich bei Java Script überhaupt nicht aus. Wäre sehr nett und kuhl, wenn du mir diese Stelle vielleicht Programmieren könntest.

        'Cool', bzw. clever wäre es, ggf. mal einen Blick in den Quelltext zu werfen.

        Dort findet man dann u.a. folgende Funktion:

          
function swapclass(b){  
    var divs = document.getElementById('faqs').childNodes;  
  
	var elsLen = divs.length;  
  
	for (i = 0, j = 0; i < elsLen; i++) {  
        if(divs[i].className == 'answer'){  
            divs[i].style.display = 'none';  
        }  
	}  
  
    a = nextObject(b);  
    a.style.display = a.style.display !='block' ?'block' :'none' ;  
  
}

        Und

        das mit HTML und DIv ist mir klar.

        findet man da auch.

        Gruß Gunther

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Auflistung Ein und Ausblenden

          Zimtstern
          – Informationen zu den Bewertungsregeln

          Hmm komisch. Habe mir natürlich den Quellcode angeschaut, aber da Stand nichts drinnen außer Head und ein bisschen Javasript.

          Also nicht dass was du gerade geschrieben hast.

          Aber danke

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Auflistung Ein und Ausblenden

            1827
            – Informationen zu den Bewertungsregeln

            Schönen Sommeranfang,

            Hmm komisch. Habe mir natürlich den Quellcode angeschaut, aber da Stand nichts drinnen außer Head und ein bisschen Javasript.

            Du hast aber gesehen das der Haupteil in einem Frame ist den man aufrufen kann? ;)

            --
            suit: JavaScript ist nur das Schirmchen am Eisbecher - der Eisbecher muss auch ohne dem Schirmchen lecker sein.
            Selfcode: sh:( fo:) ch:| rl:( br:< n4:( ie:{ mo:| va:) de:> zu:) fl:( ss:) ls:> js:)
            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

    2. Auflistung Ein und Ausblenden

      Gunnar Bittersmann Homepage des Autors
      – Informationen zu den Bewertungsregeln

      @@1827:

      nuqneH

      CSS:
      Du stellst das Div auf display:none;.

      Nein, so einfach auf gar keinen Fall.

      So sind sie nicht mehr sichtbar und werden "ignoriert".

      Eben. Und so bleiben sie es bis in alle Ewigkeit bei Clients mit CSS-Unterstützung, aber ohne JavaScript-Unterstützung (das könnten auch Suchmaschinen sein).

      Damit die Inhalte auch ohne JavaScript erreichbar sind, darf 'div {display: none}' nur bei aktiviertem JavaScript wirken. Also entweder mit JavaScript auf 'style.display = "none"' setzen oder noch besser dem 'html'- oder 'body'-Element mit JavaScript eine Klasse "js" vergeben
        <script type="text/javascript">[code lang=javascript]document.documentElement.className += " js";</script>[/code] im 'head'
      bzw.
        <script type="text/javascript">[code lang=javascript]document.body.className += " js";</script>[/code] als erstes im 'body'
      und im Stylesheet
        .js div {display: none}

      Qapla'

      --
      Bildung lässt sich nicht downloaden. (Günther Jauch)
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  2. Auflistung Ein und Ausblenden

    Gunnar Bittersmann Homepage des Autors
    – Informationen zu den Bewertungsregeln

    @@zimtstern:

    nuqneH

    Wie Programmier ich so etwas? Ich klicke eine Frage an und die Antwort öffnet sich. Klicke ich eine andere an schließt sich die alte und die neue öffnet sich.

    Für moderne Browser ist dafür kein JavaScript erforderlich, sondern lediglich die ':target'-Pseudoklasse [CSS3-SELECTORS §6.6.2]:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
	<head>  
		<meta http-equiv="Content-Type" content="text/html;  
  
charset=UTF-8" />  
		<title>TEST</title>  
		<style type="text/css">  
[code lang=css]dt:not(:target)+dd  
{  
	display: none;  
}

    	</style>  
</head>  
<body>  
	<dl>  
		<dt id="foo"><a href="#foo">foo</a></dt>  
		<dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</dd>  
		<dt id="bar"><a href="#bar">bar</a></dt>  
		<dd>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</dd>  
		<dt id="baz"><a href="#baz">baz</a></dt>  
		<dd>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</dd>  
	</dl>  
</body>

    </html>[/code]

    Opera braucht allerdings etwas Nachhilfe mit JavaScript, damit der Zurück-Button funktioniert: per 'setInterval()' ständig 'location.hash' auslesen und ggfs. die Darstellung aktualisieren.

    Im IE 8 geht das Ganze per JavaScript mit dem 'onhashchange'-Eventhandler.

    IE < 8 sind äußerst störrisch. Das Umschalten ist mit JavaScript kein Problem; der Zurück-Button ist nicht so einfach zum Funktionieren zu bringen: http://forum.de.selfhtml.org/archiv/2009/6/t187507/#m1246470 f.

    Soll das Auf- und Zuklappen nicht abrupt, sondern animiert geschehen, ist JavaScript angesagt, am besten mit einem Framework wie jQuery, das solche Methoden zur Verfügung stellt.

    Qapla'

    --
    Bildung lässt sich nicht downloaden. (Günther Jauch)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln