前言

我們在寫文章的時候，總是會不可避免的引入很多圖片或者程式碼塊，這些內容總是會佔據很大的位置，儘管有時候他們對某些使用者不是那麼的重要。那麼，我們接下來想說的就是，如何去隱藏它們，只讓想看的使用者去展開它們。

正文

這裡使用了一個HTML5的標籤來實現這個效果，很多瀏覽器現在並不支援這個標籤：<details>，目前貌似只有 Chrome 和 Safari 6 支援<details>標籤。

程式碼塊的摺疊與展開

<details>
<summary>展開原始碼</summary>

<pre>
<code>
public class Demo {
    public static void main(String[] args) {
        System.out.println("Hello World");
    }
}
</code>
</pre>

</details>
 

效果是下面這樣的：

public class Demo {
    public static void main(String[] args) {
        System.out.println("Hello World");
    }
}

圖片的摺疊與展開

<details>
<summary>展開圖片</summary>

![](https://img2020.cnblogs.com/blog/1077174/202101/1077174-20210110180433652-1946064303.png)
</details>

效果是下面這樣的：

注意

需要注意的地方是 <summary>標籤，和下面要摺疊的內容中間需要有一個空行。當然如果你不想加空行的話，加一個<p>標籤也是可以的 （手動笑哭）