Accordion based on Details+Summary

Only HTML, CSS using tags like DETAILS and SUMMARY

by Ovi Stof

HTML

<details class="eleg2" open>
  <summary>Lorem ipsum dolor sit amet, consectetur adipiscing elit</summary>
  <p>Fusce vulputate porttitor est a aliquet. Aenean lacus dui, dapibus sit amet ultrices non, cursus ac risus. Ut et diam augue. Nam eros tortor, dictum non iaculis non, scelerisque a metus.</p>
</details>
<details class="eleg2">
  <summary>Integer rhoncus odio mi, sit amet ultricies odio blandit nec</summary>
  <p>Curabitur at ornare neque. Sed porttitor ipsum quis odio venenatis tempor. Nunc non nisi feugiat risus feugiat euismod eget eget orci. Aliquam mi diam, scelerisque ut laoreet vel, dignissim nec tellus.</p>
</details>
<details class="eleg2">
  <summary>Donec ipsum diam, vestibulum in neque id, molestie imperdiet risus</summary>
  <p>Nam eleifend neque quis augue euismod, ut blandit erat accumsan. Aenean porttitor, sem vel dapibus posuere, libero nulla convallis purus, id molestie elit lacus vel turpis.</p>
</details>

CSS

details.eleg2 > summary {
  list-style: none;
  cursor: pointer;
  font-weight: bold;
  font-variant:small-caps;
  font-size:1.15em;
}
details.eleg2 > summary::-webkit-details-marker {
  display: none;
}
summary:after {
  background: #016f6f;
  border-radius: 5px;
  content: "+";
  color: #fff;
  float: left;
  font-size: 1.5em;
  font-weight: bold;
  margin: -5px 10px 0 0;
  padding: 0;
  text-align: center;
  width: 20px;
}
details.eleg2[open] summary {background:yellow;}
details.eleg2[open] summary:after {
  content: "-";
  background: #008796;
}
details.eleg2:after { /*Elimina alunecarea (float) - poate fi folosit, preponderent, cu DIV-uri*/
  content: "";
  display: table;
  clear: both;
}