I have a list with a "details" button for almost every entry in it. Currently it looks like this:

    .spoiler {display:inline;margin: 1px;}
    details[open] > summary {}
    summary {cursor:pointer;font-size:14px;}
    summary:focus {box-shadow: none !important;}
    summary > p {display:inline;}

 <ol>
  <li>Apple</li>
  <details class="spoiler" style="display:inline;border: 1px solid #aaa;border-radius: 4px;padding: 2px;">
<summary>
<b>more...</b>
</summary> <img src=".png" width="100px"></details>
  <li>Banana</li>
  <li>Orange</li>
</ol> 

I have a list with a "details" button for almost every entry in it. Currently it looks like this:

    .spoiler {display:inline;margin: 1px;}
    details[open] > summary {}
    summary {cursor:pointer;font-size:14px;}
    summary:focus {box-shadow: none !important;}
    summary > p {display:inline;}

 <ol>
  <li>Apple</li>
  <details class="spoiler" style="display:inline;border: 1px solid #aaa;border-radius: 4px;padding: 2px;">
<summary>
<b>more...</b>
</summary> <img src="https://www.applesfromny/wp-content/uploads/2020/05/20Ounce_NYAS-Apples2.png" width="100px"></details>
  <li>Banana</li>
  <li>Orange</li>
</ol> 

Unfortunately, those buttons take a lot of vertical space and look ugly in a structured list. I want them to move to the end of each bullet's text. Then, when pressed, to show the hidden content in a new line and if pressed again, to hide back. Something like that:

example

Is it possible? Your help is highly appreciated. Thank you.

• html
• css

• 2 Note that the HTML in your example is invalid. A details element cannot be a child of an ol element. – Sean Commented Nov 20, 2024 at 15:17

1 Answer 1

Rearrange the HTML slightly to comply with standards and make the details element a child of the li.

.spoiler {
  display: inline-block;
  vertical-align: top;
  margin: 1px;
}

details[open]>summary {}

summary {
  cursor: pointer;
  font-size: 14px;
}

summary:focus {
  box-shadow: none !important;
}

summary>p {
  display: inline;
}

<ol>
  <li>Apple
    <details class="spoiler">
      <summary>
        <b>more...</b>
      </summary> <img src="https://www.applesfromny/wp-content/uploads/2020/05/20Ounce_NYAS-Apples2.png" width="100px"></details>
  </li>
  <li>Banana</li>
  <li>Orange</li>
</ol>