Klapptext mit HTML & JS ... Problem mit "Ausklapp-Bild"

Supernova · Beiträge: 108 WinXP **D7 Prof**

Hallo,

also einen Klapptext zu erstellen habe ich schon mal geschafft ... :wink:

Quelltext

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:

<html>
  <head>
    <script language="JavaScript" type="text/javascript">
     <!--
        function toggle(div) {
           with(document.getElementById(div).style) {
          if(display=="none") {
             display="inline";
           }
           else {
              display="none";
           }
           }
         }
      //-->
    </script>
  </head>
  <body>
  <a href="javascript:einblenden('news1')";">Weiterlesen ...</a>
  <div id="news1" style="display : none;">
    Der Text - Klapptext
  </div>
  </body>
</html>

Danke, Google ^_^.

So nun habe ich aber auf einigen Seiten gesehen dass wenn der Text "offen ist" neben dem Link ein "Plus" steht wenn er aber geschlossen ist ein "Minus" dastehet. So ... nun bei sowas reichen mit mein JS kenntnisse nicht mehr aus ... kann mir vielleicht jemand helfen so etwas zu realisisern?

Schon mal danke ...

Grüße,
Supernova

Ein beispiel findet ihr unter: www.mymtw.de/ in den Newstexten.

_________________
Input - Output => Ganz Kaputt
*** MFG Supernova ***

Marco D. · Verfasst: Mo 07.08.06 11:21

markieren

Quelltext

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:

<html>
  <head>
    <script language="JavaScript" type="text/javascript">
     <!--

        function toggle(div,img) {
           with(document.getElementById(div).style) {
          if(display=="none") {
             display="inline";
           }
           else {
              display="none";
           }
           }
    with(document.getElementById(img)) {
            if (src=="images/plus.gif") {
                src = "images/minus.gif";
             }
           else {
               src = "images/plus.gif";
           }
           }
         }
      //-->
    </script>
  </head>
  <body>
  <img src='images/plus.gif' id='button'>
  <a href="javascript:einblenden('news1','button')";">Weiterlesen ...</a>
  <div id="news1" style="display : none;">
    Der Text - Klapptext
  </div>
  </body>
</html>

_________________
Pascal keeps your hand tied. C gives you enough rope to hang yourself. C++ gives you enough rope to shoot yourself in the foot

ManniTwo · Verfasst: Mo 07.08.06 11:24

Schau doch einfach nach, wie das auf der genannten Beispielseite gemacht wurde, nämlich einfach mit zwei Grafiken zwischen denen umgeschaltet wird:

markieren

Quelltext

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:

function TogglePanel (prefix,alttext)
{
    if (document.getElementById(prefix  + "_extraNewsText").style.display == 'none')
    {
        document.getElementById(prefix + "_extraNewsImg").src = "grafik/minus.png";
        document.getElementById(prefix + "_extraNewsImg").alt = alttext + " ausblenden";
        document.getElementById(prefix + "_extraNewsImg").title = alttext + " ausblenden";
        document.getElementById(prefix + "_extraNewsText").style.display = "";
        createView(alttext, prefix);
  }
  else
  {
        document.getElementById(prefix + "_extraNewsImg").src = "grafik/plus.png";
        document.getElementById(prefix + "_extraNewsImg").alt = alttext + " einblenden";
        document.getElementById(prefix + "_extraNewsImg").title = alttext + " einblenden";
        document.getElementById(prefix + "_extraNewsText").style.display = "none";
    }
}

[EDIT] tja, ich war zu langsam....da hat user profile icon

Marco D. schon ne antwort gegeben...[/edit]

_________________
Wer andern eine Bratwurst brät, der hat ein Bratwurst-Brat-Gerät, oder anders:

markieren

Delphi-Quelltext

1:	if Self.BraetAndernEineBratwurst then Self.HasBratwurstBratGeraet := true;

Supernova · Beiträge: 108 WinXP **D7 Prof**

Danke an euch zwei ... :wink:

_________________
Input - Output => Ganz Kaputt
*** MFG Supernova ***

	Mitgliederliste
	Gruppen
	Das Team
	Richtlinien
	Synonyme