[Resolved] Trying to Add Script for Collapsible Panels in Hooks

Home Forums Support Trying to Add Script for Collapsible Panels in Hooks

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #851042
    Emil

    Hi!

    I’m trying to add a this to my site but i can’t get it to work:

    https://www.w3schools.com/code/tryit.asp?filename=G2HGBIKJBJ6M

    I made a copy of the css and pasted it into Simple CSS. I made a copy of the HTML and pasted it into my page using sections. And I made a copy of the script and pasted it in a Hook. I tested both wp_head and wp_footer.

    I cant’t get the collapsible function to work and I can’t see the content inside.

    What am I doing wrong?

    /Emil

    Ps. I have a Live link via Local by Flywheel if you need to see my site but i couldn’t paste it in the “Your website URL”.

    GeneratePress 2.2.2
    GP Premium 1.7.8
    #851131
    David
    Staff
    Customer Support

    Hi there,

    odd that you can’ paste the link, you can send it to us via the Account Issue form here:

    https://generatepress.com/contact/

    Please add the URL of this topic to the form so we can track.

    #851139
    Emil

    Great! I have sent you the link now. Hope it works 🙂

    #851248
    David
    Staff
    Customer Support

    Ok, so you have a <p> tag immediately after the button in your HTML, which is the reason its not working. This may just be a line break in your HTML that needs removing.
    The script targets the next sibling so this <div class="content"> must come immediately after the button.

    #851252
    Emil

    Aha ok. Thank you so much for the excellent help! I am excited to try this when I get back home tomorrow! 🙂

    #852332
    Emil

    Ok so now I have tried to fix the problem. The thing is I don’t know how I get rid of those <p></p>’s. I cant see it in the editor and I tried to remove all line breaks but it still gets a <p></p> after the button when i check with Google Chromes inspector.

    Why is that and how can i remove the paragraph?

    #852337
    David
    Staff
    Customer Support

    The link you sent me has expired, any chance you can refresh so i can take a look and see if we can get round it another way.

    #852347
    Emil

    I have sent the new link via the Account Issue form.

    #852567
    David
    Staff
    Customer Support

    So try this Javascript instead:

    <script>
    
    var getNextSibling = function (elem, selector) {
    
    // Get the next sibling element
    var sibling = elem.nextElementSibling;
    
    // If there's no selector, return the first sibling
    if (!selector) return sibling;
    
    // If the sibling matches our selector, use it
    // If not, jump to the next sibling and continue the loop
    while (sibling) {
        if (sibling.matches(selector)) return sibling;
        sibling = sibling.nextElementSibling
    }
    
    };
    
    var coll = document.getElementsByClassName("collapsible");
    var i;
    
    for (i = 0; i < coll.length; i++) {
      coll.addEventListener("click", function() {
        this.classList.toggle("active");
        var content = getNextSibling(this, '.content');
        if (content.style.maxHeight){
          content.style.maxHeight = null;
        } else {
          content.style.maxHeight = content.scrollHeight + "px";
        } 
      });
    }
    </script>
    #852603
    Emil

    That didn’t do it..

    #852640
    Emil

    I also tried this solution here:

    https://alligator.io/css/collapsible/

    But it’s the same problem as it also targets the next sibling and WordPress automatically adds <p></p> after the button before the content.

    #852652
    Emil

    I tried this plugin; Don’t Muck My Markup, for disabling the “markup cleaning” on specific pages. It didn’t work when I used Sections but when I disabled sections on that page it did work. I really want to use Sections though…

    #852663
    David
    Staff
    Customer Support

    As you have jQuery on the page, we can use that so try this:

    HTML for toggle box:

    <div class="toggle-box">
        <h3 class="toggle header"><a href="#">Heading</a></h3>
        <p></p>
        <div class="toggle-box-content">
            <!-- Content in here -->
        </div>
    </div>

    You will see i left an intentional <p></p> tag after the button to test.

    CSS – style as you please:

    .js .toggle-box .toggle-box-content {
        display: none;
    }
    
    .toggle-box {
        border: 1px solid #999;
    }
    
    .toggle {
        cursor: pointer;
    }
    
    .header {
        margin: 0;
        padding: 15px;
        background: #ccc;
    }

    Jquery:

    <script>
    (function($){
        $(function(){
            $('html').toggleClass('no-js js');
            $('.toggle-box .toggle').click(function(e){
                e.preventDefault();
                
                $(this).siblings('.toggle-box-content').slideToggle();
            });
        });
    
    })(jQuery);
    </script>
    #852733
    Emil

    That worked perfectly! Thank you for the help! In the future I maybe want to not use jQuery but until then this is great 🙂

    #852749
    David
    Staff
    Customer Support

    You’re welcome
    Yeah i try to avoid it but if your plugins are loading it then may as well take advantage of jQuery. The only thing in GP that uses it is the Sticky nav.

Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.