Collapsibler Inhalt mit Bild?

  • Verwende Drupal 7.64


    Hallo,

    habe mir mit diesem Javascript von https://www.w3schools.com/howto/howto_js_collapsible.asp

    ein paar aufklappbare Balken erstellt, nur leider werden keine Bilder <respimg fid="750" figure="right" /> aufgeklappt. Diese werden dann leider nicht angezeigt. Videos zB.:<respvideo src="https://youtu.be/YUWP2SBrH1U?list=PLJtNc5fbAOY9qW3ExrLxawEjmZdQ_zVMj" /> funktionieren aber.



    Vielleicht kann mir da wer weiterhelfen. Hier das Javascript:wacko:


    var coll = document.getElementsByClassName("green-collapsible");

    var i;


    for (i = 0; i < coll.length; i++) {

    coll[i].addEventListener("click", function() {

    this.classList.toggle("green-active");

    var content = this.nextElementSibling;

    if (content.style.display === "block") {

    content.style.display = "none";

    } else {

    content.style.display = "block";

    }

    });

    }

  • CSS:

    .green-collapsible {

    background-color: #399f31;

    color: white;

    cursor: pointer;

    padding: 2px;

    width: 100%;

    border: 1px solid #ffffff;

    outline: none;

    font-size: 20px;

    text-align: center;

    }


    .green-active, .green-collapsible:hover {

    background-color: #ea7600;

    }


    .green-content {

    padding: 0 18px;

    display: none;

    overflow: hidden;

    background-color: white;

    }

    .green-collapsible:after {

    content: "\02795"; /* Unicode character for "plus" sign (+) '\02795` */

    font-size: 8px;

    color: white;

    float: left;

    margin-left: 5px;

    }


    .green-active:after {

    content: "\2796"; /* Unicode character for "minus" sign (-) */

    }


    HTML:

    <button class="green-collapsible"><b>GO GREEN - Netzwerk</b></button>

    <div class="green-content"><br/>

    <p>123</p>

    <a href="https://docs.google.com/forms/d/e/1FAIpQLScwy03Fu35rlnLarc6lGazLC2C4xlqy54nb3NTB9hNynGe5NQ/viewform"><respimg fid="709" figure="center" inner-height="150" /></a>

    </div>

  • Hey,


    liegt der Javascript Code in der HTML-Datei?


    Wenn ja musst du warten bis die Seite geladen ist weil sonst die Elemente noch nicht vorhanden sind die für den JS-Code benötigt werden.


    Dies erreichst du mit window.onload = function(){ //hier dein JS Code }


    Grüße,

    Stef

  • habe das Javascript extra im JS-Injector unter den Drupal-Configurationen hinzugefügt.
    Interessanterweise wird das Bild im Handymodus etwas zeitverzögert (aslo auf meinem Android-Smartphone) geladen, aber eben nicht am Bildschirm eines PCs/Laptops (mit Firefox, Chrome, Edge ausprobiert) oder Tablett.

    Hatte zuerst das Script generell auf der HTML-Seite , aber so hats garnicht nicht funktioniert. Erst mit dem JS-Injector hats dann geklappt/augeklappt.


  • Nun lässt sich der collapsible Balken leider nicht öffnen, oder ich habe das Script falsch eingefügt?


    Habe es im JS-Injector so integriert...


    document.addEventListener('DOMContentLoaded', function() {

    // var coll = document.getElementsByClassName("green-collapsible");

    var i;


    for (i = 0; i < coll.length; i++) {

    coll[i].addEventListener("click", function() {

    this.classList.toggle("green-active");

    var content = this.nextElementSibling;

    if (content.style.display === "block") {

    content.style.display = "none";

    } else {

    content.style.display = "block";

    }

    });

    }

    });

  • Da der TO eingangs schrieb, dass es mit Videos funktioniert, erwarte ich eher nicht, dass es an der Platzierung des Javascript liegt.


    Chris187 funktioniert die Anzeige des Bildes denn, wenn es außerhalb des Collapsilbe direkt angezeigt wird?

  • Ja, der html drupal code für responsive Bildeinstellung

    <respimg fid="709" figure="center" inner-height="150" /> funktioniert außerhalb vom collapsiblen content ohne weiters.

  • Code
    // var coll = document.getElementsByClassName("green-collapsible");

    Warum ist die Zeile auskommentiert, wenn Du doch offensichtlich die Variable coll verwendest?!


  • wie meinst du das bzw. wie ist das um zu setzten?

    Mit Java kenne ich mich nicht wirklich aus. Daher bitte um genauere Beschreibung. Checke das nicht einfach so #10, sorry

    Ansonsten ist alles von mir hier protokolliert, was ich bis jetzt gemacht, probiert habe.

  • wie meinst du das bzw. wie ist das um zu setzten?

    Mit Java kenne ich mich nicht wirklich aus. Daher bitte um genauere Beschreibung. Checke das nicht einfach so #10, sorry

    Ansonsten ist alles von mir hier protokolliert, was ich bis jetzt gemacht, probiert habe.

    #10 heißt Beitrag 10 aus diesen Thema


    Du schreibst das du dich nicht mit Java auskennst.

    Denke dran das JAVA was anderes ist wie JAVASCRIPT.

    Wenn Du es abkürzen willst dann schreib JS , dann weiß auch jeder was du meinst

  • Um das einzugrenzen, versuche, das Collapsible am Anfang sichtbar zu machen, indem Du display: none; auskommentierst:

    Code
    .green-content {
        padding: 0 18px;
        /*display: none; */
        overflow: hidden;
        background-color: white;
    }
  • Danke dir!

    Nun schaut es so aus...

    es erscheint der collapsible Balken umgekehrt, also geöffnet, glücklicher Weise mit Bild und kann erstmals mit zwei Mausklick zusammenklappen und dann mit jeweils einem Klick öffenen und schließen.

  • Ja, das ist das, was zu erwarten war und was sicher nicht das ist, was Du haben willst. Anscheinend zeigt Drupal das Bild nicht an, weil es beim Laden der Seite unsichtbar ist. Ich werde mal suchen, ob ich eine Lösung finde.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!