[Resolved] Collapse Button

Home Forums Support Collapse Button

Viewing 5 posts - 1 through 5 (of 5 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 🙂

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