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

[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

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Emil]

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

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Emil]

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

[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?

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Emil]

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

[David]

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>

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Emil]

That didn’t do it..

[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.

[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…

[David]

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>

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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 🙂

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts