Welcome to TalkGraphics.com
Page 1 of 2 12 LastLast
Results 1 to 10 of 14
  1. #1
    Join Date
    Apr 2015
    Location
    Petrolia, Ontario, Canada
    Posts
    72

    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
    22,064

    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

    Minis Forum UM780XTX AMD Ryzen7 7840HS with AMD Radeon 780M Graphics + 32 GB Ram + MSI Optix Mag321 Curv monitor
    + 1Tb 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
    18,374

    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
    22,064

    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

    Minis Forum UM780XTX AMD Ryzen7 7840HS with AMD Radeon 780M Graphics + 32 GB Ram + MSI Optix Mag321 Curv monitor
    + 1Tb 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
    72

    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
    72

    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.

  7. #7
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    22,064

    Default Re: Troubles with accordions in variants

    Thanks for the update. Keep us informed.
    Egg

    Minis Forum UM780XTX AMD Ryzen7 7840HS with AMD Radeon 780M Graphics + 32 GB Ram + MSI Optix Mag321 Curv monitor
    + 1Tb SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host

  8. #8
    Join Date
    Apr 2015
    Location
    Petrolia, Ontario, Canada
    Posts
    72

    Default Re: Troubles with accordions in variants

    Here's the response I received from Support:
    "If you want to use external code within variants you would need to use an Iframe code. Please check the site you want to implement from if they as well offer Iframe code."

    I'll try to put the code inside an iframe, but I'm not optimistic that the problem will be solved. Any thoughts?

  9. #9
    Join Date
    Apr 2015
    Location
    Petrolia, Ontario, Canada
    Posts
    72

    Default Re: Troubles with accordions in variants

    As I suspected, the iframe suggestion did not make a difference. I asked Support to keep working on it.

    FYI, I was just looking at Magix / Xara support pages. I searched for "external code" and was presented with a page of suggested help topics and answers. This page is a prime opportunity for an accordion style question and answer format. Instead, what is there is a list of links to additional pages with the first few words of the answer below the link. So, if they can't do it, neither can I?
    Click image for larger version. 

Name:	support.jpg 
Views:	183 
Size:	69.9 KB 
ID:	120857
    After seeing that, I'll likely adopt a similar format for the page I'm trying to design, rather than keep banging my head against the wall.

    Thanks for the help Egg Bramhill and Acorn. I appreciate your efforts.
    Last edited by STS; 03 May 2018 at 01:58 PM.

  10. #10

    Default Re: Troubles with accordions in variants

    I have used popup layers to accomplish something similar to an accordion. A bit of a work load to get set up at first but if the answers don't change often it is workable. Just an idea.

 

 

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
  •