<div class="outer">
  <div class="container">
    <h2>Latest Posts</h2>

    <details name="posts-list" open>
      <summary>Post 1</summary>
      <p>This is the content for the post.</p>
      <p><a href="#">Read More</a></p>
    </details>

    <details name="posts-list">
      <summary>Post 2</summary>
      <p>This is the content for the post.</p>
      <p><a href="#">Read More</a></p>
    </details>

    <details name="posts-list">
      <summary>Post-3</summary>
      <p>This is the content for the post.</p>
      <p><a href="#">Read More</a></p>
    </details>
  </div>
</div>

*,
*:after,
*:before {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

.outer {
  margin: auto;
  line-height: 1.5;
  font-size: 1.25em;
  font-family: system-ui, sans-serif;
  min-height: 100%;
  background: white;
}

.container {
  max-width: 80ch;
  margin: 0 auto;
  min-height: 100%;
  padding: 2em;
}

details {
  --border-color: black;
  border: 0.25em solid var(--border-color);
  border-radius: 10px;

  p {
    padding: 1rem;
    margin: 1rem;
  }

  p + p {
    padding-block-start: 0;
    margin: 0 0 0 1rem;
  }

  > summary {
    background: #ccc;
    padding: 0.5em;
    border-bottom: 0.25em solid var(--border-color);
    cursor: pointer;
  }

  details:has(+ details) {
    border-bottom: none;
  }
  details + details {
    border-top: none;
  }
  :not(details) + details,
  details:first-child {
    border-top-left-radius: 0.5em;
    border-top-right-radius: 0.5em;
  }
  details:not(details:has(+ details)) {
    border-bottom-left-radius: 0.5em;
    border-bottom-right-radius: 0.5em;

    &:not([open]) summary {
      border-bottom: 0;
    }
  }
}

document.querySelectorAll("details[name]").forEach(($details) => {
  $details.addEventListener("toggle", (e) => {
    const name = $details.getAttribute("name");

    if (e.newState == "open") {
      document
        .querySelectorAll(`details[name=${name}][open]`)
        .forEach(($openDetails) => {
          if (!($openDetails === $details)) {
            $openDetails.removeAttribute("open");
          }
        });
    }
  });
});