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 they can be used in the same line when clicked

Solution 1:

Does something like this work for you?

It works by positioning the details absolute (you give them no top, so top is where it would be without absolute) Then adding margin-bottom to the collapsible and negative margin-top to the details-element

.container {
  position:relative;
  margin:2em;
}
.details {
  display:none;
}
.collapsible.onactive:active,
.collapsible.onfocus:focus,
.collapsible.ontoggle:focus
{
  margin-bottom:1.5em;
}
.collapsible.ontoggle:focus {
    pointer-events:none;
}

.collapsible.onactive:active + .details, 
.collapsible.onfocus:focus + .details, 
.collapsible.ontoggle:focus + .details 
{
  display:block;
  margin-top:-1.15em;
  position:absolute;
  left:0;
  right:0;
  background:yellow;
}

<divclass=container>

    Does 
    <buttonclass="collapsible onactive">on active</button><spanclass=details>Yes!</span>
    work? Good job!work? Good job!work? Good job!work? Good job!work? Good job!
    <buttonclass="collapsible onfocus">on focus</button><spanclass=details>Yes!</span>
    work? Good job!work? Good job!work? Good job!work? Good job!work? Good 
    job!work? Good job!work? 
    <buttonclass="collapsible ontoggle">toggle</button><spanclass=details>Yes!</span>
    Good job!work? Good job!work? Good job!work? Good job!

</div>