Accordion menu not clickable

  • Author
    Posts
  • #3093852

    I am trying to put a translation exercise on my site. I originally wanted to do a form where people could enter their own answer, but then I found out premium and under cant use the form code. So I settled for an accordion that people can just click to see the correct answer. I have tried tons of different codes for different methods of essentially achieving the same thing. None of them have worked. Nothing is clickable. I want users to have to at least click to display the correct answer.

    The blog I need help with is theskdeutsch.wordpress.com.

    #3093939

    THIS IS THE CODE I AM USING:

    <!DOCTYPE html>
    <html>
    <head>
    <meta name=”viewport” content=”width=device-width, initial-scale=1″>
    <style>
    .accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
    }

    .active, .accordion:hover {
    background-color: #ccc;
    }

    .panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    }
    </style>
    </head>
    <body>

    <h2>Übersetze den Satz mit dem Genitiv in die deutsche Sprache. </h2>
    <p>1. The cover of the book is black and red.</p>

    <button class=”accordion”>Click here to see the correct translation.</button>
    <div class=”panel”>
    <p>Das Cover des Buches ist schwarz und rot.</p>
    </div>

    2. Despite the rain we go to the concert.

    <button class=”accordion”>Click here to see the correct translation.</button>
    <div class=”panel”>
    <p>Trotz des Regens gehen wir zum Konzert.</p>
    </div>

    3. “The Name of the Wind” is a popular book.

    <button class=”accordion”>Click here to see the correct translation.</button>
    <div class=”panel”>
    <p>„Der Name des Windes“ ist ein beliebtes Buch.</p>
    </div>

    <script>
    var acc = document.getElementsByClassName(“accordion”);
    var i;

    for (i = 0; i < acc.length; i++) {
    acc[i].addEventListener(“click”, function() {
    this.classList.toggle(“active”);
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight){
    panel.style.maxHeight = null;
    } else {
    panel.style.maxHeight = panel.scrollHeight + “px”;
    }
    });
    }
    </script>

    </body>
    </html>

    #3094074

    Hi there, that code is made to go into a blank web page, and cannot be used inside of a WordPress page or post, and also contains Javascript, which is not allowed except with the WordPress.com Business plan upgrade. Even then though, the code is not going to work inside of a WordPress page or post without heavy modification.

The topic ‘Accordion menu not clickable’ is closed to new replies.