[Support request] Collapse/Drop Down Container for Mobile (to minimize sections of a table)

[Graeme]

Hi there,

I noticed a number of questions similar to this but some relevant ones are a year or two out of date so I wanted to double check if there is now a better way to do this using Generate Blocks (using Generate Press Premium also).

I would like to minimize plugins, as for example now I’m using Generate Blocks instead of Elementor to speed up my entire website.

I’m trying to make a comparison table using Generate Blocks with an outer container for each row, and then a grid within the outer container to make the columns for the row.

This will work great to display lots of information in each row of the table for desktop, but on mobile, it becomes a long list as it stacks each grid column on top of each other.

To improve user experience, what I’d like to do for mobile is that say for example, “Warranty” and “Returns” grid columns will be collapsed, so when the page loads the user would just see the product title/image grid column, with the section titles of the next grid columns below, “Warranty”, “Returns”, with a drop down arrow to the right of each title such that they can click the arrow and expand these sections.

Is there a recommended way to do this?

Thank you for any guidance!

[Fernando]

Hi Graeme,

As of now, it’s a feature still not available in GenerateBlocks, though it’s something planned for the future.

For now, you would still need a third party plugin or custom code to have such an accordion functionality.

Perhaps this thread might be useful: https://generatepress.com/forums/topic/collapsible-accordion-menu/#post-2267329

[Graeme]

Thanks Fernando, got this working pretty skookum.

For myself in future, and others if they find this, this is the steps how it worked for me.

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

Added CSS to GeneratePress in customize theme and then add additional css section:

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

Then added a hook element from Appearance, Elements, add new hook, type WP_footer, set to fire on the page you need it on under the page rules, and paste in this 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-content").not($(this).next()).slideUp('fast');
      
      //Switch toggle
      $('.accordion-toggle.toggle-open').not(this).removeClass('toggle-open');
      $(this).toggleClass('toggle-open');
    });
  });
</script>

Then all there is to do is add accordion-toggle as additional CSS class to the headline block, and then add accordion-container to the container immediately after the headline which you want to disappear when you click on the headline.

Question:

I also noticed if I just have a single block which I want to toggle open and closed, for instance a List block in my case, I just added the accordion-container to this List block CSS classes and this works also, nothing wrong with doing this is there?

Also for others, the point of this was I wanted to show the toggle drop down only on mobile and not have it collapsed on desktop, to do this, put the headline and the part to be toggled all within a container, and then duplicate the container. Next add the additional CSS classes of hide-on-desktop and hide-on-tablet to the container with the toggle stuff, and hide-on-mobile to the container which is expanded for desktop without the toggle CSS class stuff.

Then I wanted an SVG icon next to the headline which indicated it could do a drop down, but in GenerateBlocks this only has an option to show this on the left hand side, and I wanted it on the right hand side.

To do this, I found the solution on this post, https://generatepress.com/forums/topic/showing-an-icon-on-the-right-of-the-headline/

Added the additional CSS ,

.reverse-icon.gb-headline {
    display: flex;
    flex-direction: row-reverse;
}

and then simply added the additional CSS class to the toggle drop down headline reverse-icon

and this got the icon onto the right hand side of the headline.

It all works pretty great now!

I guess one last question would be, sometimes I’ll see on fancy website a toggle headline like I’m making where when you click it to open the little SVG icon reverses to show the drop down is open, and if you click to close it reverses again. Is there any reasonably simple way to do this?

Thanks again for the help!

[Fernando]

Yes, it’s fine to use in a List Block if it works.

As for your second question, an easy way to do this is to add the icon through CSS :after the button. Then, when the toggle is opened, depending on the class, replace the icon through CSS as well.

So for instance,

.accordion-toggle:after {
	content: "\2193";
	font-size: 18px;
	float: right;
}

.accordion-toggle.toggle-open:after {
    content: "\2191";
}

[Graeme]

Hey Fernando thanks this is promising, I like it!

Couple questions and forgive my inexperience (no experience) with CSS.

So when I try pasting in this CSS

.accordion-toggle:after {
	content: "\2193";
	font-size: 18px;
	float: right;
}

.accordion-toggle.toggle-open:after {
    content: "\2191";
}

Then I do get a little icon next to the headline, but it does not change on open or close.

What is this symbol ” 
 “, after the { bracket on this line,.accordion-toggle.toggle-open:after {

?

That symbol doesn’t seem to copy paste correctly into the CSS template, it just shows up as a red dot.

Maybe this is causing a dysfunction?

I noticed that you have content \2193, and \2191, which presumably will change the little icon back and forth.

I’m not sure where these numbers are from for the content icon, but I would like to use the simple triangle arrow from the available SVG’s in GenerateBlocks for headlines.

It doesn’t appear possible for me to simply input the HTML for the SVG into the customize CSS section.

Is there a way to do this?

Thanks again!

[Fernando]

Can you provide a link to the site in question?

[Graeme]

Usually I prefer not to share my site in the support forums, though this page isn’t yet published anyway so there isn’t anything to see at the moment!

I guess there isn’t a simple way to replace the content: "\2193"; from your code above to be the simple arrow up ^ and arrow down SVG icon from GenerateBlocks pre programmed SVG icons for headlines?

Thanks again for the help!

[Fernando]

You may use the private information field when sharing your site if you want it private: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

You can try looking for arrow codes here: https://www.toptal.com/designers/htmlarrows/arrows/ or simply use ^ by typing it on the keyboard.

[Graeme]

Ok so there isn’t a similar way to do it using SVG’s?

I really like the basic one I’m using from the GenerateBlocks library for headers, and I don’t seem to see anything similar on the toptal website.

[Fernando]

Yes, it’s possible.

You can try something like this:

.accordion-toggle:after {
    height: 40px;
    width: 40px;
    position: static;
    background-image: url("https://www.sample.com/wp-content/uploads/2021/11/up-arrow.webp");
    z-index: 999999;
    content:"";
}

.accordion-toggle.toggle-open:after {   
    background-image: url("https://www.sample.com/wp-content/uploads/2021/11/down-arrow.webp");
}

Replace the URLs with the SVG URLs.

[Graeme]

Thank you Fernando!

Sorry for my lack of understanding on this… I’m only used to copying HTML for an SVG. For example, from the GenerateBlocks selection of SVG’s for headers, the down arrow:

<svg aria-hidden=”true” role=”img” height=”1em” width=”1em” viewBox=”0 0 448 512″ xmlns=”http://www.w3.org/2000/svg”><path fill=”currentColor” d=”M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z”></path></svg>

This doesn’t work as a URL as you mentioned, should I Just used something like I found , first result on Google for “SVG to URL”,

https://yoksel.github.io/url-encoder/

to switch it?

I don’t know if there is any issue using a random online convertor like that or if there is a more standard approach.

Sorry I realize this is getting off topic at this point!

[Fernando]

Try saving a file of that/your SVGs, and upload that file in your site’s media library. Then, get the URL of those SVGs, and use them in the code.

[Author]

Posts