Yes Frank thank you so much! This is exactly what I was asking about. I was wondering if the same thing could be done using frameworks and, most importantly, how
I looked at Materialize and they have some of their own ready-made classes.

Then try to translate "Señora" next time

BTW, Frank's reply was apparently the correct thing. It's called a 'collapsible' in Materialize speak, but usually goes by the name of 'Accordion' everywhere else. Mind the spelling, though! A lot of people don't and end up with something not working.

Maybe I should have guessed what you really meant after having read your first post. You were asking about a 'collapsible header'. But I cannot recall someone having wanted to put the top of a page into an accordion before. The question is usually about collapsing it sideways, so I, and probably Wayan too, thought you were asking about the same.

Here's the translation of your text into English:

Oh, I’m a thousand times sorry! I didn’t know! :-0
I will be more careful now, Señora!
Both you and Wayan are professionals in this field, so everything seems easy to you. But I am a person spoiled by WordPress, so this is all difficult for me, and believe me, it requires a lot of effort to understand something.
I have finished the website I mentioned in another topic (psydopomoga.com), but I lost sleep and my appetite over it; still, I got it done. I struggled the most with the menu. So now I know what I was asking about the 'accordion.' I want to understand how to make it. I know it’s easier to just download a ready-made component and use it, but I still want to make it myself.

You did well with that psychologist's site, so I guess your appetite will return once you have slept enough.

Those of us who are regular helpers here in this forum are just users, but we have all been here for a while, so we may have picked up a thing or two. I, for my part, am managing a couple of WP sites and struggle with where to put what.

If you want to learn how to build accordions from scratch, I'd say go to the W3schools site: https://www.w3schools.com/howto/howto_js_accordion.asp. You can learn a lot there, but it may be a bit tricky to adapt it for Site Designer. For that maybe my component, that Frank pointed you to, can be of help.

Thank you very much, very useful site!
Indeed, the accordion turned out to be very easy to make using HTML+CSS+javascript. Now all that remains is to figure out how to make it using SD

Hello Inger!

Please correct me if I'm wrong. After checking the link you provided, as well as a couple of similar sites, I realized that Frameworkless is quite sufficient, at least from what I've seen. In other words, it can do everything that the three other frameworks can do. I even experimented a bit in SD (Site Designer), and to my surprise, everything worked out. So far, I’ve played around with only three tasks, but everything works. SD is simply a brilliant program. In short, I understand that Frameworkless is sufficient for my needs, right? Materialize can do all of this too, but the difference is that it has everything pre-packaged into ready-made classes that you specify in a list for the tasks you need, while in Frameworkless, you’ll have to manually enter the code into the corresponding windows in SD, right?

You are correct in what you are assuming. Frameworkless can do what the frameworks do. The difference is, as you say, that the frameworks have prepacked classes that are amalgams of different settings. In Frameworkless you need to add those settings yourself. As for Materialize, it is a bit special, and sometimes such a class may create something very different-looking from what the other frameworks do, and I have had to add a class 'browser-default' to some items to make them look kind of 'recognisable'.

I don't know which approach you have with Frameworkless, desktop down or mobile up. Personally I prefer mobile up. It has to do with the recommendations we got from all sides when responsive webdesign came about, now 12-15 years ago. We were told that it is easier to start with a small viewport and then widen it. And it really felt that way. CSS grid was launched about the same time, and it really didn't make sense to use grids for phone-size viewports. So we let grids kick in a little later, as we moved the viewport slider towards the right. But the first frameworks SD had, Foundation and Bootstrap - both mobile-up based - had already gained their congregations of users, so that is why I always make sure that my 'BareBone' components can be built both ways.

Thank you very much, Inger! You clarified a lot. My approach was not quite right—I was going "Desktop first", as it was easier for me to see the complete picture I wanted to achieve. Let’s say I approached it like an artist. But there is a different logic in what you said, and I think it's really easier to go from small to big. So, I’ll have to retrain myself. And one more question, if I may—where can I read about the elements from this list? Is there documentation explaining each element and its functionality? So far, I’ve only learned about the "collapsible header", but I’d like to know the whole list. I want to master Materialize. Screenshot attached.

I think you'll find most things regarding Materialize here: https://materializecss.com/
That is the version used in SD anyway. But it seems to me that Materialize has been at a standstill for years, the version 1.0.0 is already some 4-5 years old. But someone mentioned a while ago that there is another resouce site where It has been more developed, but I don't know the URL of that site. Maybe someone else here will know and will post it.

Thank you! I've been to that site, but there are no explanations regarding the use of the pre-built classes. Alright, I’ll figure that out. Could you please show me an example of how to work with these pre-built classes in SD (Site Designer)? Using the theme I have here as an example: [https://themes.coffeecup.com/frame.html](https://themes.coffeecup.com/frame.html). On the main page, the text "FRAME" is white until the 768 breakpoint, after which the text becomes transparent and only the outline remains white. In other words, the body of the font becomes transparent. I understand that this is achieved using the "mix-blend-mode" class, but I don't understand how to do this in SD. I could simply write everything in the necessary fields manually, but that defeats the purpose. The point is to learn how to work with this directly in SD.