• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Problem mit ausklappbarem Text

Shangh

Shangh

Neues Mitglied
Hallo zusammen!

Ich bin noch nicht sehr erfahren mit JS und versuche zum ersten mal, es in html einzubinden.

Der Zweck soll sein, dass man verschiedene Überschriften anklickt, woraufhin unter der jeweiligen Überschrift ein Text ausklappt und auch wieder einklappt.

Hier der relavante Teil:

---------------------------------------------------------------------------------------------------------------------------------------------
<html>
<head>
<script language="javascript">
<!--
function klappen(id)
{var elem = document.getElementById(id);
if(elem.style.display == "none")
{elem.style.display = "block";
}
else {elem.style.display = "none";
}
}
//-->
</script>​
</head>
<body>

<a href="javascript:klappen('01')">Überschrift</a>
<object id="01" style="display:none" data="artikel1.htm" type="text/html" width="100%" height="100%"/>

<a href="javascript:klappen('02')">Überschrift2</a>
<object id="02" style="display:none" data="artikel2.htm" type="text/html" width="100%" height="100%"/>

<a href="javascript:klappen('03')">Überschrift3</a>
<object id="03" style="display:none" data="artikel3.htm" type="text/html" width="100%" height="100%"/>

<a href="javascript:klappen('04')">Überschrift4</a>
<object id="04" style="display:none" data="artikel4.htm" type="text/html" width="100%" height="100%"/>

<a href="javascript:klappen('05')">Überschrift5</a>
<object id="05" style="display:none" data="artikel5.htm" type="text/html" width="100%" height="100%"/>

<!-- usw... -->​

</body>​
</html>
-------------------------------------------------------------------------------------------------------------------------------------------

Diese Links befinden sich in einer division, mit den Abmaßen 540x600px.
Ich verwende hier für jeden Untertext eine eigene htm-Datei.
Soweit klappt das auch ganz gut, bis auf zwei Probleme:
- Es wird nur die erste Überschrift und der erste Untertext angezeigt,
alles was danach folgen müsste, erscheint nicht.
-Ich kann den Abstand zwischen 'Überschrift' und 'Untertext' nicht beeinflussen.

-------------------------------------------------------------------------------------------------------------------------------------------

So und jetzt noch ne ganz grundsätzliche Frage: ist das überhaupt ansatzweise sinnvoll?
Mir ist keine bessere Umsetzungsmöglichkeit eingefallen, aber ich bin mir recht sicher dass es eine gibt.
Ziel ist letztenendes, dass man in etwa so ein Bild erhält:


-----------------------------------------------------------------------------------------------
Überschrift

Einleitender Text, der Spannung erzeugt und zum weiterlesen mehr...

-----------------------------------------------------------------------------------------------
Überschrift

Einleitender Text, der Spannung erzeugt und zum weiterlesen animiert.

-----------------------------------------------------------------------------------------------

Allerdings möchte ich bei HTML, CSS und Java bleiben.

Hoffe ihr könnt mir helfen und bereits vielen Dank im Voraus,

Sascha
 
So wie du die <object> tags benutzt, sieht es eher so aus, als wenn du frames bauen willst.
Wenn du nur den Content der Dateien unter den Überschriften anzeigen willst würde ich es eher so machen (falls du in den Dateien PHP schreiben kannst).

PHP: 
<html>
  <head>
    <title>asd</title>
    <script>
      function toggleElement (id) {
        var el = document.getElementById(id);
        el.style.display = (el.style.display === 'block' ? 'none' : 'block');
      }
    </script>
    <style>
      .someClass div {
        display: none;
        width: 200px;
        height: 200px;
      }
    </style>
  </head>
  <body>
    <div class="someClass">
      <h2>asd 1</h2>
      <div id="text_01"><?php include('datei1.html'); ?></div>
      <h2>asd 2</h2>
      <div id="text_01"><?php include('datei2.html'); ?></div>
      <h2>asd 3</h2>
      <div id="text_01"><?php include('datei3.html'); ?></div>
    </div>
  </body>
</html>

Ps: Du kannst hier im Forum folgendes verwenden um deinen Code besser lesbar zu machen
Code: 
[php][/php] und [html][/html] und [code]
und bestimmt noch ein paar andere.[/code]
 
Vill mal n Beispielcode, wie sowas aussehen könnte

HTML: 
<div class="eintrag">
                        <div class="trigger trigger_active"><p>Holly</p><p class="date">schrieb am 10.10.2013</p></div>
                        <div class="toggle_container">
                            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
                        </div>
                    </div>
                    <div class="eintrag">
                        <div class="trigger"><p>Marieluise </p><p class="date">schrieb am 19.09.2013</p></div>
                        <div class="toggle_container">
                            <p>Lam voluptua. At veata sanctus est Lorem ipsum dolor sit ed diam nonumy  ebum. Stet clita kasd sum dolor sit amet.</p>
                        </div>
                    </div>
                    <div class="eintrag">
                        <div class="trigger"><p>Knusberbacke </p><p class="date">schrieb am 05.09.2013</p></div>
                        <div class="toggle_container">
                            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
                        </div>
                    </div>
                    <div class="eintrag">
                        <div class="trigger"><p>Hellboy </p><p class="date">schrieb am 04.09.2013</p></div>
                        <div class="toggle_container">
                            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
                        </div>
                    </div>
Zum Vergrößern anklicken....
Code: 
$('.trigger').not('.trigger_active').next('.toggle_container').hide();
    $('.trigger').click( function() {
        var trig = $(this);
        if ( trig.hasClass('trigger_active') ) {
            trig.next('.toggle_container').slideToggle('slow');
            trig.removeClass('trigger_active');
        } else {
            $('.trigger_active').next('.toggle_container').slideToggle('slow');
            $('.trigger_active').removeClass('trigger_active');
            trig.next('.toggle_container').slideToggle('slow');
            trig.addClass('trigger_active');
        };
        return false;
    });

zu deinen Fragen noch etwas:

- Es wird nur die erste Überschrift und der erste Untertext angezeigt,
alles was danach folgen müsste, erscheint nicht.

dieses Problem liegt an deinem Code da du in deiner Funktion lediglich das aufklappen drin hast aber keine Anweisung was passieren soll, wenn ein anderes Element angeklickt wird. Dieses Problem ist in meinem Code oben bereits berücksichtig und behoben

-Ich kann den Abstand zwischen 'Überschrift' und 'Untertext' nicht beeinflussen.

ich möchte mal vermuten, dass das an dem a-tag liegt. hast du dem a display block zugewiesen? denn a-tags sind nicht standartmäßig display block wodurch Abstände jeglicher Art keine Wirkung haben.

wenn du weiter Fragen hast oder irgendwas nich verstehst, frag ruhig :)

lg Niki
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben