[Resolved] accordion/collapse text button for container block

Home Forums Support [Resolved] accordion/collapse text button for container block

Home Forums Support accordion/collapse text button for container block

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #1619803
    Erika

    Hello!

    So I have used the code from David’s reply post here. It works as expected 100%.

    I have been trying to modify it for my needs, but I fail. I don’t think it is useful to share my code fails, so please see David’s code success, reshared here to make this efficient:

    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 hook element:

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

    script hook element:

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

    What I need is for the accordion-container class to be applied to a container of paragraphs, not just one <p> paragraph. In other words, I need it so that site visitor presses the button, and then several paragraphs expand below. Obviously, this code makes only one paragraph expand…

    I’m sure there is a way to modify the above so that one button expands my several paragraphs at once.

    Can you help? Please and thank you. ๐Ÿ™‚
    Erika

    #1620181
    David
    Staff
    Customer Support

    Hi there,

    Davids code actually applies to the Container and anything within that container.
    So all you would require is:

    1. A Headline Block with a class of: accordion-toggle
    2. Followed immediately by a Container Block with a class of accordion-container

    #1620686
    Erika

    Thank you, David.

    I thought that first, and that is exactly what I tried, but it did not work.

    To be clear, first I tried it exactly as David had it, applying it to a <p> paragraph block.
    Worked 100%.

    Then, I deleted that paragraph block, inserted container, applied accordion-container class to that container, put my multiple paragraphs inside that container… and it only expanded the fist paragraph inside the container.

    But since you say it should work, I will revist this on my end and find if I somehow did something wrong.

    Thank you, by the way. I know this falls under the category of “not exactly GP” just because I’m doing something within GP. This is why I buy all the GP products – awesome support whenever needed.

    I’ll figure out what’s wrong on my end.

    Thank you. Cheers,
    Erika

    #1620691
    Erika

    Oh wait…I do have to make an edit to one of the hook elements, like this.
    Now it works on container block:

    change html hook element to this

    <h4 class="accordion-toggle">Add a Heading</h4>
    <div class="accordion-container">
    </div>

    All good.

    #1621103
    David
    Staff
    Customer Support

    Glad to hear you found the solution ๐Ÿ™‚

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