Welcome to TalkGraphics.com
Results 1 to 10 of 14

Hybrid View

  1. #1
    Join Date
    Apr 2015
    Location
    Petrolia, Ontario, Canada
    Posts
    70

    Default Troubles with accordions in variants

    Hello:
    I'm having a problem designing a faq page. I want to use an accordion style list of faq's and responses. No secret, the code is from W3Schools which I want to customize later. It works fine, but not when I try to use it in 4 variants. It'll work in 2 out of 4! Variant widths are 1200px, 960px, 480px, and 320px. All I did was copy the placeholder from the 1st variant to the rest and adjust the width accordingly. The questions (FAQ's) will display, but when I click on one of them, the accordion does not open to show the answer. I'll provide the code below. Any insights would be appreciated. Thanks.

    ___________________
    CSS:
    <style>
    .accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
    }

    /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
    .active, .accordion:hover {
    background-color: #ccc;
    }

    /* Style the accordion panel. Note: hidden by default */
    .panel {
    padding: 0 18px;
    background-color: white;
    display: none;
    overflow: hidden;
    }
    </style>

    ___________________
    HTML:
    <button class="accordion">Section 1</button>
    <div class="panel">
    <p>Response 1...</p>
    </div>

    <button class="accordion">Section 2</button>
    <div class="panel">
    <p>Response 2...</p>
    </div>

    <button class="accordion">Section 3</button>
    <div class="panel">
    <p>Response 3...</p>
    </div>

    ___________________
    javascript:
    <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.display === "block") {
    panel.style.display = "none";
    } else {
    panel.style.display = "block";
    }
    });
    }
    </script>
    __________________

  2. #2
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    21,895

    Default Re: Troubles with accordions in variants

    Hi STS, I can only confirm your findings. The accordion works on a 1200px wide variant as well as the 480px variant but not the 960px & 300px variants.

    Hopefully Acorn or Siran can expand on this. If not, contact support.

    Here's my attempt:
    Attached Files Attached Files
    Egg

    Intel i7 - 4790K Quad Core + 16 GB Ram + NVIDIA Geforce GTX 1660 Graphics Card + MSI Optix Mag321 Curv monitor
    + Samsung 970 EVO Plus 500GB SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host

  3. #3
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,744

    Default Re: Troubles with accordions in variants

    It is a mixture of possible errors.

    Button tags outside of a form tag wrapper.

    JavaScript embedded into a Placeholder on each Variant where only one is need for the combined set.
    The JavaScript unable to count through all the instances of the class accordion.
    JavaScript in the Head and the Body.

    Acorn
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

  4. #4
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    21,895

    Default Re: Troubles with accordions in variants

    Cheers Acorn, I just copied the code from the W3Schools 'Try This' page, with the code in the same head/body section as theirs. So I'm still confused why it doesn't function an all variants.
    Egg

    Intel i7 - 4790K Quad Core + 16 GB Ram + NVIDIA Geforce GTX 1660 Graphics Card + MSI Optix Mag321 Curv monitor
    + Samsung 970 EVO Plus 500GB SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host

  5. #5
    Join Date
    Apr 2015
    Location
    Petrolia, Ontario, Canada
    Posts
    70

    Default Re: Troubles with accordions in variants

    FYI: I tried a bootstrap version - no javascript. Same symptoms. Thanks for the help thus far.

  6. #6
    Join Date
    Apr 2015
    Location
    Petrolia, Ontario, Canada
    Posts
    70

    Default Re: Troubles with accordions in variants

    I've tried a couple of other versions of accordion-style utilities. They all exhibit the same kind of behavior once they're copied to variants. Some variants work, some don't. Very odd. I've submitted a support ticket to Magix. If I learn any more, I'll update this thread.

 

 

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •