Use details and summary tags as collapsible inline elements

I’m working to study a solution to this problem:

find a way to implement collapsible buttons (or other similar objects) such that

1. they can be used in the same line
2. when clicked, their content is showed between the line where the buttons lie and the next line
3. they are responsive
4. style the content independently from the title

I made this gif to better understand what I would like to obtain

Until now I tried with collapsible objects and with details/summary tags.

It seems that by using collapsible objects it is only possible to achieve the features number 2. and number 4. In fact, since the content (div class) has to placed manually somewhere in the text (so in a fixed place), I don’t know how it would be possible to achieve the responsiveness. Same about the point 1., if two buttons are placed in the same line and the two contents are placed in the next line, the second button will use the first content that it will find, but the first button and the second content cannot be used.

Here is some code about collapsible objects: https://jsfiddle.net/Ascalon/fs6zyqxL/

________________________________________________________________

Details/summary tags are very easy to implement, but harder to style.

It seems that by using them it is only possible to achieve the feature numbers 1. and number 3., and partially the number 4. In fact, for example, the background color of the details affects also the one of the summary. Moreover, when setting display: inline, performing a click on the summary move the text around it in the next line.

Here is some code: https://jsfiddle.net/Ascalon/zotp0829/

________________________________________________________________

Recap: collapsible buttons have features 2 and 4, details/summary tags have features 1 and 3 (combining the two objects would do the job!).

Is it possible to obtain all 4 features with only one element?

• This topic was modified 5 years, 6 months ago by giannit.