HTMLのみで実装できる「折りたたみメニュー」参考デザイン〇選【CSS不要】

<details style="background: linear-gradient(to right, #dbf1ff, #f0fff0); margin-bottom: 0.5ex; border: 1px solid #bababa; border-radius: 5px;"><summary style="padding: 10px 15px; cursor: pointer; position: relative; display: flex; align-items: center;"><span style="transform: rotate(90deg); position: absolute; left: 20px; color: #1f28ba;">▲</span><span style="color: black; margin-left: 30px;">もっと詳しく見る</span></summary>
<div style="padding: 10px 15px; border-top: 1px solid #bababa;">ここに内容を記載してください。</div>
</details>

<details style="background: linear-gradient(to right, #fcfff0, #fcffef); margin-bottom: 0.5ex; border: 1px solid #c2c2c2; border-radius: 5px;"><summary style="padding: 10px 15px; cursor: pointer; position: relative; display: flex; align-items: center;"><span style="color: #ffffff00; top: 10px; left: 15px; width: 20px; height: 20px; border: 2px solid #bababa; border-radius: 5px; position: absolute;">.</span><span style="color: #ffffff00; width: 10px; height: 5px; border-left: 3px solid white; border-bottom: 3px solid white; position: absolute; top: 21px; left: 27px; transform: translate(-50%, -60%) rotate(-45deg); border-color: #e74c3c;">.</span><span style="color: black; margin-left: 30px;">もっと詳しく見る</span></summary>
<div style="padding: 10px 15px; border-top: 1px solid #c2c2c2;">ここに内容を記載してください。</div>
</details>

<details style="background: linear-gradient(to right, #e5f6ff, #c7e9ff); margin-bottom: 0.5ex; border: 1px solid #b8bcff; border-radius: 5px;"><summary style="padding: 10px 15px; cursor: pointer; position: relative; display: flex; align-items: center;"><span style="margin-right: 10px; color: #007cff;">+</span><span style="color: black; margin-left: 0px;">もっと詳しく見る</span></summary>
<div style="padding: 10px 15px; border-top: 1px solid #b8bcff;">ここに内容を記載してください。</div>
</details>

<details style="background: linear-gradient(to right, #ffffff, #ffe0e0); margin-bottom: 0.5ex; border: 1px solid #c2c2c2; border-radius: 5px;"><summary style="padding: 10px 15px; cursor: pointer; position: relative; display: flex; align-items: center;"><span style="display: inline-block; width: 22px; height: 22px; background: #ffc6c6; color: white; border-radius: 50%; margin-right: 12px; text-align: center; line-height: 22px; font-size: 14px;">v</span><span style="color: black; margin-left: 0px;">もっと詳しく見る</span></summary>
<div style="padding: 10px 15px; border-top: 1px solid #c2c2c2;">ここに内容を記載してください。</div>
</details>

<details style="background:linear-gradient(to right, #d6ffef, #d7feef); margin-bottom: 0.5ex; border: 1px solid #5ba98b; border-radius: 5px;"><summary style="padding: 10px 15px; cursor: pointer; position: relative; display: flex; align-items: center;"><span style="color: #ffffff00; width: 7px; height: 7px; border-left: 3px solid white; border-bottom: 3px solid white; position: absolute; top: 50%; left: 90%; transform: translate(-50%, -60%) rotate(223deg); border-color: #1dcb72;">.</span><span style="color: black; margin-left: 0px; color: #1dcb72; font-weight: bold;">もっと詳しく見る</span></summary>
<div style="padding: 10px 15px; border-top: 1px solid #5ba98b;">ここに内容を記載してください。</div>
</details>

<details style="background: linear-gradient(to right, #fffbe5, #fffbe6); margin-bottom: 0.5ex; border: 1px solid #ff6c6c; border-radius: 5px;"><summary style="padding: 10px 15px; cursor: pointer; position: relative; display: flex; align-items: center;"><span style="color: #ffffff00; width: 7px; height: 7px; border-left: 3px solid white; border-bottom: 3px solid white; position: absolute; top: 50%; left: 90%; transform: translate(-50%, -60%) rotate(134deg); border-color: #ff6c6c;">.</span><span style="color: #ff6c6c; margin-left: 0px; font-weight: bold;">もっと詳しく見る</span></summary>
<div style="padding: 10px 15px; border-top: 1px solid #ff6c6c;">ここに内容を記載してください。</div>
</details>

<details style="background: #ffffff; border: 1px solid #8fbfff; border-radius: 15px; overflow: hidden;"><summary style="display: flex; align-items: center; padding: 10px 15px; cursor: pointer; background: #d6e7ff; position: relative;"><span style="display: inline-block; width: 22px; height: 22px; background: #8378ee; color: white; border-radius: 50%; margin-right: 12px; text-align: center; line-height: 22px; font-size: 14px;">v</span><span style="color: black; margin-left: 0px;">もっと詳しく見る</span></summary>
<div style="padding: 10px 15px;">ここに内容を記載してください。</div>
</details>

<details style="background: #ffffff; border: 1px solid #ffbdbd; border-radius: 15px; overflow: hidden;"><summary style="display: flex; align-items: center; padding: 10px 15px; cursor: pointer; background: #ffebeb; position: relative;"><span style="color: #ffffff00; top: 10px; left: 15px; width: 20px; height: 20px; border: 2px solid #ffb0b0; border-radius: 5px; position: absolute;">.</span><span style="color: #ffffff00; width: 10px; height: 5px; border-left: 3px solid white; border-bottom: 3px solid white; position: absolute; top: 21px; left: 27px; transform: translate(-50%, -60%) rotate(-45deg); border-color: #e74c3c;">.</span><span style="color: black; margin-left: 30px;">もっと詳しく見る</span></summary>
<div style="padding: 10px 15px;">ここに内容を記載してください。</div>
</details>

<details style="background: #feffe0; border: 1px solid #e6e9ed; border-radius: 15px; overflow: hidden;"><summary style="display: flex; align-items: center; padding: 10px 15px; cursor: pointer; background: #fbffbd; position: relative;"><span style="transform: rotate(90deg); position: absolute; left: 20px;">▲</span><span style="color: black; margin-left: 30px;">もっと詳しく見る</span></summary>
<div style="padding: 10px 15px;">ここに内容を記載してください。</div>
</details>

<details style="background: #f7fff5; border: 1px solid #7ba96a; border-radius: 15px; overflow: hidden;"><summary style="display: flex; align-items: center; padding: 10px 15px; cursor: pointer; background: #e8ffdb; position: relative;"><span style="color: #ffffff00; width: 7px; height: 7px; border-left: 3px solid white; border-bottom: 3px solid white; position: absolute; top: 50%; left: 90%; transform: translate(-50%, -60%) rotate(223deg); border-color: #419b09;">.</span><span style="color: black; margin-left: 0px;">もっと詳しく見る</span></summary>
<div style="padding: 10px 15px;">ここに内容を記載してください。</div>
</details>

<details style="background: #ffffff; border: 1px solid #000000; border-radius: 15px; overflow: hidden;"><summary style="display: flex; align-items: center; padding: 10px 15px; cursor: pointer; background: #000000; position: relative;"><span style="margin-right: 10px; color: #ffffff;">+</span><span style="color: #ffffff; margin-left: 0px;">もっと詳しく見る</span></summary>
<div style="padding: 10px 15px;">ここに内容を記載してください。</div>
</details>

<details style="background: #ffffff; border: 1px solid #e6e9ed; border-radius: 15px; overflow: hidden;"><summary style="display: flex; align-items: center; padding: 10px 15px; cursor: pointer; background: linear-gradient(to right, #dbf1ff, #f0fff0); position: relative;"><span style="color: #ffffff00; width: 7px; height: 7px; border-left: 3px solid white; border-bottom: 3px solid white; position: absolute; top: 50%; left: 90%; transform: translate(-50%, -60%) rotate(223deg); border-color: #5d6d7e;">.</span><span style="color: black; margin-left: 0px;">もっと詳しく見る</span></summary>
<div style="padding: 10px 15px;">ここに内容を記載してください。</div>
</details>

<details style="background: #f7f9fc; border-radius: 0; overflow: hidden;"><summary style="border-left: 4px solid #75a3ff; padding: 10px 15px; cursor: pointer; font-weight: 500; position: relative; display: flex; align-items: center; user-select: none; color: #333;"><span style="color: black; margin-left: 0px;">もっと詳しく見る</span></summary>
<div style="padding: 15px; background: white;">ここに内容を記載してください。</div>
</details>

<details style="background: #f8f9f0; border-radius: 0; overflow: hidden;"><summary style="border-left: 4px solid #ff7575; padding: 10px 15px; cursor: pointer; font-weight: 500; position: relative; display: flex; align-items: center; user-select: none; color: #333;"><span style="color: #ffffff00; width: 7px; height: 7px; border-left: 3px solid white; border-bottom: 3px solid white; position: absolute; top: 50%; left: 90%; transform: translate(-50%, -60%) rotate(223deg); border-color: #ff7575;">.</span><span style="color: black; margin-left: 0px;">もっと詳しく見る</span></summary>
<div style="padding: 15px; background: white;">ここに内容を記載してください。</div>
</details>

<details style="background: #edfdf8; border-radius: 0; overflow: hidden;"><summary style="border-left: 4px solid #40ba7b; padding: 10px 15px; cursor: pointer; font-weight: 500; position: relative; display: flex; align-items: center; user-select: none; color: #333;"><span style="color: #ffffff00; width: 7px; height: 7px; border-left: 3px solid white; border-bottom: 3px solid white; position: absolute; top: 50%; left: 90%; transform: translate(-50%, -60%) rotate(134deg); border-color: #40ba7b;">.</span><span style="color: black; margin-left: 0px;">もっと詳しく見る</span></summary>
<div style="padding: 15px; background: white;">ここに内容を記載してください。</div>
</details>

<details style="background: linear-gradient(to right, #f4f4f4, #cbcbcb); border-radius: 0; overflow: hidden;"><summary style="border-left: 4px solid #9e9e9e; padding: 10px 15px; cursor: pointer; font-weight: 500; position: relative; display: flex; align-items: center; user-select: none; color: #333;"><span style="transform: rotate(90deg); position: absolute; left: 20px;">▲</span><span style="color: black; margin-left: 30px;">もっと詳しく見る</span></summary>
<div style="padding: 15px; background: white;">ここに内容を記載してください。</div>
</details>

<details style="background: linear-gradient(to right, #e7fffd, #e0e0ff); border-radius: 0; overflow: hidden;"><summary style="border-left: 4px solid #1f28ba; padding: 10px 15px; cursor: pointer; font-weight: 500; position: relative; display: flex; align-items: center; user-select: none; color: #333;"><span style="margin-right: 10px; color: #5d6d7e;">+</span><span style="color: black; margin-left: 0px;">もっと詳しく見る</span></summary>
<div style="padding: 15px; background: white;">ここに内容を記載してください。</div>
</details>

<details style="background: linear-gradient(to right, #fffce0, #ffd0cb); border-radius: 0; overflow: hidden;"><summary style="border-left: 4px solid #ff8f8f; padding: 10px 15px; cursor: pointer; font-weight: 500; position: relative; display: flex; align-items: center; user-select: none; color: #333;"><span style="display: inline-block; width: 22px; height: 22px; background: #ff8f8f; color: white; border-radius: 50%; margin-right: 12px; text-align: center; line-height: 22px; font-size: 14px;">v</span><span style="color: black; margin-left: 0px;">もっと詳しく見る</span></summary>
<div style="padding: 15px; background: white;">ここに内容を記載してください。</div>
</details>

<details style="overflow: hidden;"><summary style="display: flex; margin-left: auto; margin-right: auto; padding: 10px 15px; cursor: pointer; font-weight: 500; position: relative; align-items: center; user-select: none; color: #5d6d7e; background: #7aafff; border: 1px solid #875cff; border-radius: 10px; width: 80%;"><span style="color: white; margin-left: 0px;">もっと詳しく見る</span></summary>
<div style="padding: 10px 15px; background: #ebf0ff; margin-top: 1.5ex; border: 1px solid #e6e9ed;">ここに内容を記載してください。</div>
</details>

<details style="overflow: hidden;"><summary style="display: flex; margin-left: auto; margin-right: auto; padding: 10px 15px; cursor: pointer; font-weight: 500; position: relative; align-items: center; user-select: none; color: #ff8a8a; background: #feffcc; border: 1px solid #ff8a8a; border-radius: 10px; width: 80%;"><span style="transform: rotate(90deg); position: absolute; left: 20px;">▲</span><span style="color: #ff7979; margin-left: 30px; font-weight: bold;">もっと詳しく見る</span></summary>
<div style="padding: 10px 15px; background: #fffceb; margin-top: 1.5ex; border: 1px solid #e6e9ed;">ここに内容を記載してください。</div>
</details>

<details style="overflow: hidden;"><summary style="display: flex; margin-left: auto; margin-right: auto; padding: 10px 15px; cursor: pointer; font-weight: 500; position: relative; align-items: center; user-select: none; color: #5d6d7e; background: #f0f4ff; border: 1px solid #6c86a7; border-radius: 10px; width: 80%;"><span style="display: inline-block; width: 22px; height: 22px; background: #8eadff; color: white; border-radius: 50%; margin-right: 12px; text-align: center; line-height: 22px; font-size: 14px;">v</span><span style="color: black; margin-left: 0px;">もっと詳しく見る</span></summary>
<div style="padding: 10px 15px; background: #f7f7f7; margin-top: 1.5ex; border: 1px solid #e6e9ed;">ここに内容を記載してください。</div>
</details>

<details style="overflow: hidden;"><summary style="display: flex; margin-left: auto; margin-right: auto; padding: 10px 15px; cursor: pointer; font-weight: 500; position: relative; align-items: center; user-select: none; color: #5d6d7e; background: linear-gradient(to right, #ffffff, #ffe0e0); border: 1px solid #cccccc; border-radius: 10px; width: 80%;"><span style="margin-right: 10px; color: #5d6d7e;">+</span><span style="color: black; margin-left: 0px;">もっと詳しく見る</span></summary>
<div style="padding: 10px 15px; background: #fff5f5; margin-top: 1.5ex; border: 1px solid #e6e9ed;">ここに内容を記載してください。</div>
</details>

<details style="overflow: hidden;"><summary style="display: flex; margin-left: auto; margin-right: auto; padding: 10px 15px; cursor: pointer; font-weight: 500; position: relative; align-items: center; user-select: none; color: #5d6d7e; background: #71f4b0; border: 1px solid #58bb64; border-radius: 10px; width: 80%;"><span style="color: #ffffff00; width: 7px; height: 7px; border-left: 3px solid white; border-bottom: 3px solid white; position: absolute; top: 50%; left: 90%; transform: translate(-50%, -60%) rotate(134deg); border-color: #5d6d7e;">.</span><span style="color: black; margin-left: 0px;">もっと詳しく見る</span></summary>
<div style="padding: 10px 15px; background: #e5fff7; margin-top: 1.5ex; border: 1px solid #e6e9ed;">ここに内容を記載してください。</div>
</details>

<details style="overflow: hidden;"><summary style="display: flex; margin-left: auto; margin-right: auto; padding: 10px 15px; cursor: pointer; font-weight: 500; position: relative; align-items: center; user-select: none; color: #5d6d7e; background: linear-gradient(to right, #d2f7ff, #ffe0e0); border: 1px solid #a8deff; border-radius: 10px; width: 80%;"><span style="color: black; margin-left: 0px;">もっと詳しく見る</span></summary>
<div style="padding: 10px 15px; background: #ffffff; margin-top: 1.5ex; border: 1px solid #e6e9ed;">ここに内容を記載してください。</div>
</details>