Fluid Nested Accordion

Learn how to create Fluid Nested Accordion using html, css and/or js.

<div class="container">
  <div class='nested-accordion'>
    <h3>Heading</h3>
    <div class='comment'>
      This is a comment 
      <div class='nested-accordion'>
        <h3>Heading</h3>
        <div class='comment'>
          This is a another content which is really long and pointless but keeps on going and it technically a run-on sentence but here is a link to google to distract you -> <a href='https://google.com' target='_blank'>link</a>
          <div class='nested-accordion'>
            <h3>Heading</h3>
            <div class='comment'>This is a another content</div>
          </div>
          <div class='nested-accordion'>
            <h3>Heading</h3>
            <div class='comment'>This is a another content</div>
          </div>
        </div>
      </div>
      <div class='nested-accordion'>
        <h3>Heading</h3>
        <div class='comment'>This is a another content</div>
      </div>
    </div>
  </div>
  <div class='nested-accordion'>
    <h3>Heading</h3>
    <div class='comment'>This is a another content</div>
  </div>
</div>
<style>
* {
  margin: 0;
  padding: 0;
  line-height: 1.5;
  font-size: 1em;
  font-family: Calibri, Arial, sans-serif;
}

.container {
  margin: 0 auto;
  width: 80%;
}

.nested-accordion {
  margin-top: 0.5em;
  cursor: pointer;
}
.nested-accordion h3 {
  padding: 0 0.5em;
}
.nested-accordion .comment {
  line-height: 1.5;
  padding: 0.5em;
}
.nested-accordion h3 {
  color: #47a3da;
}
.nested-accordion h3:before {
  content: "+";
  padding-right: 0.25em;
  color: #becbd2;
  font-size: 1.5em;
  font-weight: 500;
  font-family: "Lucida Console", Monaco, monospace;
  position: relative;
  right: 0;
}
.nested-accordion h3.selected {
  background: #47a3da;
  color: #fff;
}
.nested-accordion h3.selected:before {
  content: "-";
}
.nested-accordion .comment {
  color: #768e9d;
  border: 0.063em solid #47a3da;
  border-top: none;
}
.nested-accordion a {
  text-decoration: none;
  color: #47a3da;
}
</style>

</script>

Fluid Nested Accordion

Random HTML Example Codes: