侧边栏toggle效果 手风琴
<h3>侧边栏toggle效果</h3>
<p><img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=573dbd4b7ac0cac1482f1dbcfaad27dc&amp;file=file.png" alt="侧边栏toggle效果 手风琴" /></p>
<pre><code>&lt;link href=&quot;bootstrap-5.3.3-dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; /&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;bootstrap-5.3.3-dist/js/bootstrap.bundle.min.js&quot;&gt;&lt;/script&gt;
&lt;button data-bs-toggle=&quot;collapse&quot; data-bs-target=&quot;#home-collapse&quot; aria-expanded=&quot;true&quot;&gt;
Home
&lt;/button&gt;&lt;br /&gt;
&lt;div class=&quot; show&quot; id=&quot;home-collapse&quot; style=&quot;&quot;&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;#&quot; &gt;Overview&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot; &gt;Updates&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot; &gt;Reports&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;a href=&quot;#&quot; data-bs-toggle=&quot;collapse&quot; data-bs-target=&quot;#cate-collapse&quot; aria-expanded=&quot;true&quot;&gt;
Category
&lt;/a&gt;
&lt;div class=&quot; show&quot; id=&quot;cate-collapse&quot; style=&quot;&quot;&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;#&quot; &gt;Overview&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot; &gt;Updates&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;
&lt;a href=&quot;#&quot; data-bs-toggle=&quot;collapse&quot; data-bs-target=&quot;#sub-collapse&quot; aria-expanded=&quot;true&quot;&gt;Reports&lt;/a&gt;
&lt;ul class=&quot;show&quot; id=&quot;sub-collapse&quot;&gt;
&lt;li&gt;aaa&lt;/li&gt;&lt;li&gt;bbb&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;</code></pre>