Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #24152

    Hi, I’m trying to add an accordion code to the site, but for some reason it’s not working. I’ve added CSS and Java code in the customize section and added html to the page. I can see the accordion section, but it just doesn’t work. Here’s a link to the page, maybe you can figure out what’s going on – http://touchforbirth.com/preliminary/bodywork-2/

    The accordion is about a third down on that page.

    Thank you!

    #24155
    Arnel C
    Member

    Hello Nikolay,

    Sorry for the problem with the accordion section.  Can you provide us a little more information about how you have added the code? We would need access to your site in order to access look at this issue.  If you’re using Bootstrap code, then it’s possible that the issue has to do with version.  You can actually load Bootstrap with your WordPress site found here.  You can also find the latest version of the accordion code in the Javascript section.  If you have the latest version of Bootstrap loaded and you’re using their code, then the accordion code should work.  I have used it before myself, so I understand the issue you’re running into.  Make sure there are no typo’s in your code as it will also cause the code not to work.

     

    If you have any further questions or comments, please let us know.

     

    Regards,

    Arnel C.

    #24154

    Hi Arnel,

    Here’s the CSS code I’ve added to Custom Code section:

    .boldgrid-css{ background: white; }
    /* Style the buttons that are used to open and close the accordion panel */
    button.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) */
    button.accordion.active, button.accordion:hover {
    background-color: #ddd;
    }

    /* Style the accordion panel. Note: hidden by default */
    div.panel {
    padding: 0 18px;
    background-color: white;
    display: none;
    }
    button.accordion:after {
    content: ‘2795’; /* Unicode character for “plus” sign (+) */
    font-size: 13px;
    color: #777;
    float: right;
    margin-left: 5px;
    }

    button.accordion.active:after {
    content: “2796”; /* Unicode character for “minus” sign (-) */
    }
    div.panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    }

     

    I’ve also added JS:

    // jQuery(‘body’);
    var acc = document.getElementsByClassName(“accordion”);
    var i;

    for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function(){
    /* Toggle between adding and removing the “active” class,
    to highlight the button that controls the panel */
    this.classList.toggle(“active”);

    /* Toggle between hiding and showing the active panel */
    var panel = this.nextElementSibling;
    if (panel.style.display === “block”) {
    panel.style.display = “none”;
    } else {
    panel.style.display = “block”;
    }
    }
    }
    //open and close accordion
    var acc = document.getElementsByClassName(“accordion”);
    var i;

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

    And HTML on the page:
    <button class=”accordion”>Section 1</button>
    <div class=”panel”>
    <p>”section text”</p>
    </div>

    Here’s where I got the code from:

    https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_accordion_symbol

    #24153
    Arnel C
    Member

    Hello Nikolay,

     

    Thanks for providing the code that you used.  It would be easier if you removed that and used the code that I linked you to previously.  In fact, you don’t have to load Bootstrap, as it’s already loaded with the WordPress installation once BoldGrid is loaded.  You only need to use the code that they provide.  You can see the accordion code provided here.  I tested it myself (using the example they provided) and it definitely works.  You have to paste their code in the TEXT editor in between the divs that are on the page.  If you want to see it working, check out my WordPress test post here. This example is the exact code provided in the bootstrap link that I provided above.

    I hope this helps to answer your question, please let us know if you require any further assistance.

     

    Regards,

    Arnel C.

Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Accordion code not working’ is closed to new replies.