Help - Accordions not working

Répondu

6 Commentaires

  • Dan Ross
    Community Moderator

    Hey Morgan,

    It looks like this might be a Bootstrap accordion, do you have Bootstrap JS and CSS loaded in your document head? Without it, nothing will happen.

    Have you checked or tried any of the examples here:

    https://getbootstrap.com/docs/4.3/components/collapse/

    or

    https://www.w3schools.com/bootstrap/bootstrap_collapse.asp for example?

    0
  • Trapta
    Community Moderator

    @Morgan King, as Dan said, you need to load Bootstrap JS and CSS in your document head in order to use Bootstrap accordion.

    However, you can take a look at this link in case, you have a customized theme that does not have bootstrap by default in it. Adding bootstrap in case of the customized theme might create some overwrites in CSS resulting in UI changes.

    Let us know if you face any issue.

    Thanks

    1
  • Morgan King

    Thank you!!!! That did the trick.

    0
  • AirDroid

    @Trapta I add the accordion code from w3shcool, but it not works. do you have any ideals?

    0
  • Brett Bowser
    Zendesk Community Team

    Hey AirDroid,

    Trapta may be able to point you in the right direction if you provide the code you're using. Any chance you could share that?

    0
  • AirDroid

    Sure. 

    In script.js, I add the code below:

    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";
    }
    });
    }

    In style.css, I add the below code: 

    .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;
    }

    .accordion:after {
    content: '\002B';
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
    }

    .active:after {
    content: "\2212";
    }

    .panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;

    In the article, I add the below code:

    <h2>Animated Accordion</h2>
    <p>Click on the buttons to open the collapsible content.</p>

    <button class="accordion">Section 1</button>
    <div class="panel">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>

    <button class="accordion">Section 2</button>
    <div class="panel">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>

    <button class="accordion">Section 3</button>
    <div class="panel">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>

    after previewing the article, when I click the accordion, the content didn't display, please help check what am I miss.

     

    0

Vous devez vous connecter pour laisser un commentaire.

Réalisé par Zendesk