[Resolved] Collapse Button

Home Forums Support [Resolved] Collapse Button

Home Forums Support Collapse Button

Viewing 15 posts - 1 through 15 (of 25 total)
  • Author
    Posts
  • #1168809
    Marcel

    Hello,
    Please give me a small hint on how could I create a collapse button as in this video recording.
    Thank you!

    #1168874
    David
    Staff
    Customer Support

    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.

    #1194129
    David

    Hey guy. I followed the steps as posted above and it’s still not working.

    I think something isn’t labeled correctly.

    I don’t see .accordion-title referenced anywhere in the HTML. And the same for .accordion-content.

    Nonetheless, I made some edits to make it work and still not working for me.

    Here is the code:

    Javascript

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

    CSS

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

    HTML

    <h3 class="accordion-toggle">Title Goes Here</h3>
    <div class="accordion-container">
    </div>

    I would love to see how to correct this and get it working for the GP community.

    #1194173
    David

    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!

    #1194262
    David
    Staff
    Customer Support

    Awesome – thanks for sharing a working version πŸ™‚

    #1548997
    Alexandra

    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!

    #1549554
    David
    Staff
    Customer Support

    Hi there,

    1. The CSS goes into your Customizer > Additional CSS or your Child Themes style sheet.

    2. Create a new Hook Element.
    In its content you add the HTML.
    You select a Woocommerce Hook.
    This guide shows you the various hook positions:
    https://www.businessbloomer.com/woocommerce-visual-hook-guide-single-product-page/

    Note: if the Hook you want is not in the list – then select Custom Hook, and add the hook to the field provided.

    Set the Display Rules to Product > All Products

    3. The jQuery script, create a new Hook Element.
    Add the script to the hook content,
    Select the hook: wp_footer
    Set the Display Rules to Product > All Products

    4. The Snippet – this document explains how to add that code:

    https://docs.generatepress.com/article/adding-php/

    #1550336
    Alexandra

    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! πŸ™‚

    #1560251
    Alexandra

    Quick curiosity:

    I removed the jquery snippet (this one:

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

    from my functions.php and the accordion still works.

    Is that normal? How is it possible? πŸ™‚
    I’m just asking in order to make sure I’m not doing anything stupid by leaving it out.

    Thank you!

    #1560328
    David
    Staff
    Customer Support

    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 πŸ™‚

    #1560343
    Alexandra

    Aha, I think I understand πŸ™‚
    So then it’s ok to leave it out, right?

    #1560628
    David
    Staff
    Customer Support

    Yep, its fine to leave that function out πŸ™‚

    #1560681
    Alexandra

    That’s great! Thank you so much, David! πŸ™‚
    That function alone was dropping my Page Insights speed score 6 points, so… great news that I can do without it πŸ˜€

    #1560690
    David
    Staff
    Customer Support
    #1625597
    Mike

    Thank you to everyone that contributed to this thread. It helped me immensely.

    I hooked the accordion to the same woocommerce hook as Alexandra, below the add to cart button.

    I’d like the content that now fills the default Description tab on the woocommerce product page to dynamically fill into the accordion content section.

    Any suggestions on how to accomplish this would be highly appreciated.

    Thanks again,

    Mike

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