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.
Large button that toggles the visibility of the âAnswerâ block
The buttonâs text is an icon 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 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.
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.
I disagree 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.
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.
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
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!
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.
aligned to the right
and place it over the icon present in the âQuestionsâ block
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.
