0

I'm trying to figure out if it's possible to use <details> and summary instead of buttons for an expandable navigation.

Consider this markup:

<nav>
  <ul>
    <li>
      <a href="#">Link 1</a>
      <details>
        <summary></summary>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit eos tenetur saepe, provident vitae, illum. Similique nemo ullam ipsam fuga vero quam inventore officiis quibusdam, mollitia reiciendis, atque quos. Ex.
      </details>
    </li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
  </ul>
</nav>

and this css:

li {
  &:first-of-type {
    border-top: 1px solid tomato;
  }
  border-bottom: 1px solid tomato;
  position: relative;
}

summary {
  position: absolute;
  right: 0;
  top: 0;
  border: 1px solid maroon;
}


li {
  border-bottom: 1px solid tomato;
  position: relative;
}

li:first-of-type {
  border-top: 1px solid tomato;
}

summary {
  position: absolute;
  right: 0;
  top: 0;
  border: 1px solid maroon;
}
<nav>
  <ul>
    <li>
      <a href="#">Link 1</a>
      <details>
        <summary></summary>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit eos tenetur saepe, provident vitae, illum. Similique nemo ullam ipsam fuga vero quam inventore officiis quibusdam, mollitia reiciendis, atque quos. Ex.
      </details>
    </li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
  </ul>
</nav>

when the <details> is open it works except the <summary is in the top of the <li> which is not right. If I add bottom: 0; to make it stretch full height, the <summary> then expands with the <li> which I understand but I want the <summary> to be full height of the <li> all the time (as it could be with a button) but not stretch when it´s open. Is that possible?

InSync
  • 4,851
  • 4
  • 8
  • 30
pistevw
  • 432
  • 4
  • 15
  • This cannot currently be done with
    and using only CSS, because CSS can't manipulate an HTML element's attribute.
     – Wimanicesir Apr 17 '23 at 15:33
  • Does this answer your question? [Click expand with details and summary tag](https://stackoverflow.com/questions/39718047/click-expand-with-details-and-summary-tag) – Wimanicesir Apr 17 '23 at 15:33
  • No it does not answer my question. My question was about how to place the summary and details not how they open and close. – pistevw Apr 19 '23 at 07:24

0 Answers0