collapsible content box

Hide content behind a clickable tab that expands when selected. Adjust values to your liking from one of the styles below.

Your title goes here

enter your text here

 
<details open style="
  max-width: 300px;
  margin: 16px auto;
  border: 0px solid #000;
  background: #c0b2ff;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 2px 2px 0 #999;
">

  <summary style="
    padding: 5px 14px;
    cursor: pointer;
    font-weight: bold;
    color: #6d4b57;
    background: linear-gradient(to bottom, #c7da1c, #c0b2ff);
    user-select: none;
  ">
    Your title goes here
  </summary>

  <div style="
    padding: 12px;
    text-align: center;
    line-height: 1.8;
  ">

enter your text here

  </div>

</details>

Your title goes here

enter your text here

<details open style="
  max-width: 300px;
  margin: 16px auto;
  border: 1px solid #b6ae8d;
  background: #ffebc7;
  color: #7e6d5a;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0px 0px 0 #999;
">

  <summary style="
    padding: 10px 14px;
    cursor: pointer;
    font-weight: bold;
    color: #7e6d5a;
    background: linear-gradient(to bottom, #d8bcaf, #ffebc7);
    user-select: none;
  ">
    Your title goes here
  </summary>

  <div style="
    padding: 12px;
    text-align: center;
    line-height: 1.8;
  ">

enter your text here

  </div>

</details>

Your title goes here

enter your text here

<details open style="
  max-width: 300px;
  margin: 16px auto;
  border: 1px solid #252525;
  background: #ffffff;
  border-radius: 0px;
  overflow: hidden;
  box-shadow: 0px 0px 0 #999;
">

  <summary style="
    padding: 10px 14px;
    cursor: pointer;
    font-weight: bold;
    color: #fff;
    background: linear-gradient(to bottom, #474747, #111111);
    user-select: none;
  ">
    Your title goes here
  </summary>

  <div style="
    padding: 12px;
    text-align: center;
    line-height: 1.8;
  ">

enter your text here

  </div>

</details>

go back