Layout Blocks... again

Another questions about Layout Blocks. :wink:

Is it possible to create something like here: Frequently Asked Dog Grass Questions | DoggieLawn
If you click a question there the answer opens and the symbol on the right (arrow) changes to visualize that another click will close the answer.

First i watched the tutorial on YT: Create an accordion
On Sparkles own site (Sparkle 5 — Sparkle > scroll down to “Sparkle 4”, “Sparkle 3” and so on) the solution is to use a fixed symbol that shows both arrows.
But it’s not that smart…

For now @saber1 it is not possible as far as I know.
Your example shows a button with two click events instead of the one that Sparkle manages for now - and that isn’t totally correct but will do for my explanation.

You can get something close to what you referenced, but not exact…
By using a Button you have a hover and click event which can flip the up arrow into a down arrow indicating to the User it will open something. When they click it it will trigger the Layout Block to open, but once they remove the mouse from the button it will go back to the up arrow… So close!

Using accordions can greatly enhance the user experience on a website. Essentially, accordions help minimize the number of clicks needed for users to find the information they’re looking for, while also saving space on the page.

A proper accordion setup typically expands one answer at a time, while keeping the other questions visible. When you click on a different question, it collapses the current answer and opens the new one - thus eliminating the need for a close indicator at all. However, on the example site you mentioned, this isn’t happening smoothly. Users have to click twice - once to open an answer and again to close it. Plus, if an answer isn’t closed and another question is clicked, the page gets longer, requiring scrolling to see the rest of the questions - yet more work for the user…

In some cases, users might prefer having all the answers visible at once. In that case, you don’t need an accordion; just list all the questions and answers, allowing users to scroll through them.

If you’re set on a two-click option, popups could be a better choice. With popups, you can have arrows that change direction to indicate opening and closing, but users have to close one question before they can open another. You can check out an example of this setup HERE

Those little design options on websites might look nice, but they should always serve to enhance the user experience. In many cases, they end up creating more hassle for users. So, it’s important to reconsider your approach and prioritise what truly benefits the user rather than opting for what seems like a clever option.

1 Like

Hello :wave:t2:

Technically, it is possible. You simply need to overlay the two layout blocks (the answer over the question), as in this example:


Question Block:

  • Large button that toggles the visibility of the “Answer” block
  • The button’s text is an icon image aligned to the right
  • Optional: Enable the option to close other layout blocks and set the group to 1, for example.

Answer Block:

  • Adjust the size of the block and place it over the “Question” block
  • Set the block’s background color to transparent
  • Add a small button with the icon image and place it over the icon present in the “Questions” block
  • Set the button with a white background (for example) to hide the other button behind it, and apply the same settings as the button in the “Questions” block.

However, while trying to create the example project, I encountered numerous bugs… Although the principle is quite simple, the implementation is a bit more complex due to the always temperamental layout blocks. One of the bugs, for example, requires placing a space between the different blocks, otherwise they end up stacked on top of each other. Perhaps you won’t have this bug on your end.

Translated with AI.

I don’t think is a bug - layout blocks are not designed to be overlaid one above the other. They are essentially used for creating distinct blocks of content on a page which can then be moved up or down the page, forcing other layout blocks to move also. They can be spaced out on a page with space between them, but are more commonly used by having them snap to each other to create one long page of content. This is why it’s difficult to have them align one over the other.

1 Like

I disagree :sweat_smile: I think layout blocks were probably designed to be overlaid. If we have the possibility to do so, it’s logical that they were designed for us to be able to do it. Moreover, it works very well with layout blocks that are not hidden. It’s when a block is hidden, a function that came with Sparkle 5, that their arrangement becomes disordered.
Furthermore, the ability to overlay them is sometimes practical, since it allows for overflowing boxes, images, or other elements into another section.

(Translated with AI)

My understanding is that a Layout Block is like a html DIV tag and they are one dimensional.
To have them stack is where tricky javascript comes in to play!

So I’m going to say that trying to stack a Layout Block on top of another Layout Block and then it moves or does not stay in place is not a bug. But who best then the Creators of Sparkle to let us know.

1 Like

The example was only intended to show what I mean by the arrows.
Not how the accordion as such was implemented there.

I fully understand how layout blocks work.
Thanks for the explanation anyway.

But you have to keep in mind that users often misunderstand how a website works.
The arrows should only show that another click closes the response.
Regardless of whether it is completely logical for us.

I think you might be mistaken, or maybe I misunderstood your response, but overlaying DIVs is quite simple and should only require CSS. Only the animations and actions to show/hide the block would need JavaScript ^^ And indeed, it’s not only the layout blocks that are inside DIVs, but all elements of the site (images, boxes, texts, popups…) and it is possible to overlay them and even to hide and display popups correctly despite their overlay.

But this is not important, and I would like to clarify what I mean by “bug”: I consider as “bug” any result that is not expected or not similar to the Sparkle workspace, without having to consider the complexity that lies behind the functionality :smile:

Yes Allan I was more referring to Sparkle not other web builders.
In Sparkle we don’t really have control over the CSS so hacking a Layout Block on top of another Layout Block, well… Yes Sparkle generates DIVs but I was saying that the Layout Block behaves like a DIV container where all your elements (grouped or otherwise) goes into.

It would be better though if we could have a Layout Block in a Popup. That would allow us to have Layout Blocks stacked on top of one another. But if you think it is a bug then for sure let @duncan know! :+1:


On your topic about Layouts.
I needed to make an accordion on the page so that the Layout doesn’t shift.
I created a Layout and grouped other Layouts (created accordion) into it. I figured it out by accident, but it’s functional.
If you want to see how it works, it’s on a work in progress here: User Login
Name: marivox
Password: 2024
Menu - models
Kemping Pod 2,4x4,8

I should clarify that I wasn’t suggesting that it wasn’t possible - I was simply pointing out that its isn’t something that layout blocks were designed to do, therefore, the shift in position that the user was experiencing isn’t a bug in Sparkle. Like most things in web design, there is always a workaround, and I’m happy you’ve discovered a way to achieve this accordion effect, and happy you’ve shared with the community.

I remember hearing they have planned to do the arrow switch, so we just have to wait

1 Like