Archived topic
accordion/collapse text button for container block
4 replies · Started by Erika on January 15, 2021
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
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
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
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.
Glad to hear you found the solution :)
