[Resolved] Collapsible/Accordion menu

[Steve]

I need some help with regards to this topic.

https://generatepress.com/forums/topic/collapse-button/#post-1194173

I have added the CSS, I have added the hook elements.
If I take the HTML as written here and create a container with custom html, it works fine.

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

Here is what I have:
Container with data
Container with data
Container
Heading
Container
image
container
paragraphs
Container with data, etc

What I want is the above 3 containers in bold to be in the accordion.
So the accordion might say “click here to open”
and when you click, the 3 containers open up instead of just a paragraph.

I have saved the 3 containers as a resuable block, but how do you implement the accordion with the block.

Thanks,
Steve

[Fernando]

Hi Steve,

Try adding the three Containers within another Container Block, and add the accordion-container class to this parent Container Block’s class list.

Hope this helps!

[Steve]

Fernando,
Not sure I understand how to do what you are saying. I guess I haven’t run across this yet, so could you tell me how to add the class to the parent container block’s class list. Maybe you can use what I have below to help explain.

In the meantime, I sort of found a solution, but I know it isn’t right because of what I found.
Here is a screenshot of what I did. When I select preview page it looks fine.

But when I save draft, then go back to edit, this is what I see:

So I think I am on the right track, just wrong method. Hopefully yours will work better.
Thanks,
Steve

[Fernando]

I see. Here’s a couple of screenshots showing what I mean:

accordion-toggle: https://share.getcloudapp.com/nOuXlPo2

accordion-container: https://share.getcloudapp.com/xQuwn7b1

Hope this clarifies!

[Steve]

Fernando,

The screenshots showed me the answer I was looking for as to where to put the custom CSS, however, did not help with how to implement the solution.

Tried various things and none worked. I found that even with the error messages I see when I go back to edit again, my solution was still working.

Here is where you lost me. As I have in my images, the custom html at the top has 2 classes, the toggle for the label, and the container for the data. The data is between 2 div tags, so as you saw, there is a second custom html with just the closing div after the 3 containers. So not sure how you would achieve the result with just the accordion-container in the parent container. With this solution, there is no closing div, and no toggle for the label. And if I take out the accordion-container div from the custom html, and put the CSS class in the container above it, I get the box with label, but when click to expand it, it disappears. Not to mention I still would need to put custom html in the front and back ends anyway.

My solution did take some work moving blocks around and adding the 2 custom html tags, but I was hoping for an easier solution. And even though it seems to be working, not sure why when you go back into edit the tags all say “This block contains unexpected or invalid content”. This concerns my a little as to is there something there that might mess up things elsewhere.

Thanks,
Steve

[Fernando]

You shouldn’t need the custom HTML block with the setup like the one I mentioned.

Example: https://share.getcloudapp.com/kpu8KB2y

The Headline Block has the accordion-toggle class, and the Container Block has the accordion-container class.

Here it is working from my end: https://share.getcloudapp.com/geuRb8eL

As shown, I didn’t use custom HTML.

The Container Block has an opening and closing tag.

With regards to the warning – “This block contains unexpected or invalid content”, it’s showing because the opening and closing tags are in different custom html blocks. It should still work though if that’s the method you want to use.

Hope this clarifies!

[Steve]

Fernando,

Ok, I see what you are doing and was able to recreate it, however, it does not address my situation. Let me see if I can explain.

Let’s say I have 3 sections.

(Grid)
DOG (container)
image (container)
Here is information on the dog (container)

CAT (container)
Here is information on the cat (container)
image (container)

OTHER ANIMALS (container)
image (container)
Here is information on other animals (container)

What you did is made a headline for each topic with accordion-toggle, and then put the image and description using accordion-container

What I want is all 3 containers (DOG, image, and description) to be hidden, and a different description that you click on.

So what I end up in your example is a closed accordion with the word DOG, then when click you get the image and description. What I want is a closed accordion that would say “Click here to see more about dogs” and when you click, all 3 containers open up.

What is missing in your example is the <h4 class="accordion-toggle">Add a Heading</h4>. Not sure how to accomplish this without the custom HTML.

[Fernando]

Yes, that should work as well.

It’s not missing. In the screenshot, there’s a GB Headline Block which I added accordion-toggle to as mentioned.

Specifically, you can create a h4 Headline Block and add accordion-toggle to its class list.

Then, after the Headline, you should have your Grid Block there.

Then, add accordion-container to the class list of the Grid Block.

Here’s a sample of it working from my end: https://share.getcloudapp.com/BluGx6j5

Hope this clarifies!

[Steve]

Fernando,
Got it to work, sort of. I am attaching 2 images. The first is with just the accordion-toggle. As you can see, the toggle works and the grid with containers looks fine. The toggle will open and close it, it just starts in the open position instead of the closed position.

But when I add the accordion-container to the grid, the containers are all messed up. It starts in the closed position, but the image is a small square, and the content is now below it. I have looked everywhere I could think of, like the CSS interfering, etc, but cannot figure it out.

Thanks,
Steve

[Fernando]

I see. To have a better understanding of the issue, may you kindly provide the link to the site in question?

You may use the private information field for this: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

Hope to hear from you soon.

[Steve]

Reply is in private information

[Fernando]

I can’t seem to view the post. It says “the page can’t be found”. Is the post published already?

Kindly let us know.

[Steve]

Sorry, try it now

[Fernando]

I see. Just realized the CSS to make this accordion work would override the flex nature of Grids, making them not align as they should.

Try placing the Grid Blocks within another Container Block, and move the accordion-container class to the Container Block.

So it should be:

Container Block

Container Block
	-Headline Block (with accordion-toggle CSS)
	-Container Block (with accordion-container CSS)
		-Grid Block

Hope this clarifies.

[Steve]

Perfect,
Thanks for all the help. I guess we both learned something 🙂

Thanks again,
Steve

[Author]

Posts