[Resolved] Collapse Button

Hi there,

simplest method would be to look for an accordion plugin.

If you’re up for a bit of code then this may help.
Add this JS to your site, you can add it using a Hook Element, select the WP_footer hook and choose the pages you want it applied to:

<script type="text/javascript">
  jQuery(document).ready(function($) {
    $('.accordion-toggle').click(function(){

      //Expand or collapse this panel
      $(this).next().slideToggle('fast');
      
      //Hide the other panels
      $(".accordion-content").not($(this).next()).slideUp('fast');
      
      //Switch toggle
      $('.accordion-toggle.toggle-open').not(this).removeClass('toggle-open');
      $(this).toggleClass('toggle-open');
    });
  });
</script>

Then add this CSS:

.accordion-container {
    display: none;
}
.accordion-title {
    cursor: pointer;
}

Then your HTML would look like this:

<h2 class="accordion-toggle">Toggle Heading 1</h2>
<div class="accordion-container">
<!-- add your HTML content in here -->
</div>

Just repeat it as many times as you need it.
Only negative is it requires jQuery.

Update: Here is the code sets I used for accordion content.

CSS

.accordion-container {
    display: none;
    padding: 20px;
}
.accordion-container.toggle-open {
    display: block;
}
.accordion-toggle {
    cursor: pointer;
    background-color: #f9f9f9;
}
h4.accordion-toggle {
    font-size: 14px;
    padding: 10px 20px;
    margin-top: 10px;
    margin-bottom: 0;
}

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

h4.accordion-toggle.toggle-open:after {
    content: "\2212";
}

HTML

<h4 class="accordion-toggle">Add a Heading</h4>
<div class="accordion-container">
<p>Insert your contet</p>
</div>

Add this script to a new Element: Hook = wp_footer

<script type="text/javascript">
  jQuery(document).ready(function($) {
    $('.accordion-toggle').click(function(){

      //Expand or collapse this panel
      $(this).next().slideToggle('fast');
      
      //Hide the other panels
      $(".accordion-container").not($(this).next()).slideUp('fast');
      
      //Switch toggle
      $('.accordion-toggle.toggle-open').not(this).removeClass('toggle-open');
      $(this).toggleClass('toggle-open');
    });
  });
</script>

Create a new Snippit using: Code Snippet

add_action( 'wp_enqueue_scripts', 'tu_load_jquery' );
function tu_load_jquery() {
    wp_enqueue_script( 'jquery' );
}

Hope this works for the next developer.

Cheers!

Hi guys!
I’m trying to implement this solution on my website, but I need some help, please.

I’m trying to add an accordion on product pages, under the Add to cart button.
Product page sample.
I’ve tried creating a Block element or a Hook element but I have no idea where to paste all those other pieces of code.

So, I know where to place the CSS, but where do I place the HTML and the Script?
And that Snippet at the end… Does that go in my functions.php file? I don’t know what Code Snippet is…
I apologize if my questions are dumb, I’m not a developer 🙁
Thank you so much!

David, you are the best!
Thank you so so much for this!
It worked perfectly!

I can now see the steps were quite straightforward and easy to understand, I was just not realizing that it involved adding 2 different hook elements 🙂

Thank you so much for your kindness and patience! 🙂

Ok so GP doesn’t load jQuery by default, unless you enable either the Sticky Navigation or Infinite scroll options on the blog.

Also other plugins that require jQuery will make that request.

So its either one of those GP options that is enabled or another plugin is requesting it 🙂

Yep, its fine to leave that function out 🙂

Glad to be of help!