diff --git a/content/static/css/stylesheet.css b/content/static/css/stylesheet.css
index 526942de8..6d1e00b69 100644
--- a/content/static/css/stylesheet.css
+++ b/content/static/css/stylesheet.css
@@ -565,7 +565,6 @@ pre,
   color: var(--gray-3);
 }
 
-/* common dialog styles */
 .Dialog {
   padding: 0;
   position: fixed;
diff --git a/content/static/css/unit_doc.css b/content/static/css/unit_doc.css
index c0207c2ae..818ed8606 100644
--- a/content/static/css/unit_doc.css
+++ b/content/static/css/unit_doc.css
@@ -42,7 +42,6 @@
 .UnitDoc .Documentation h4 {
   font-size: 1.375rem;
 }
-
 .Documentation {
   color: var(--gray-1);
   display: block;
@@ -301,8 +300,7 @@
   font-style: italic;
   margin-left: 0.5rem;
 }
-
-.Documentation-bodyDeprecated {
+.Documentation-deprecatedBody {
   color: var(--gray-3);
   font-size: 1rem;
   font-style: italic;
@@ -310,8 +308,20 @@
   margin-left: 0.5rem;
   margin-right: 0.5rem;
 }
-
-.Documentation-deprecatedShowLink {
-  font-size: 1rem;
-  font-weight: 400;
+.Documentation-deprecatedDetails .Documentation-deprecatedBody::after {
+  color: var(--turq-dark);
+  content: 'Show';
+  margin-left: 1rem;
+}
+.Documentation-deprecatedDetails[open] .Documentation-deprecatedBody::after {
+  color: var(--turq-dark);
+  content: 'Hide';
+  margin-left: 1rem;
+}
+.Documentation-deprecatedDetails > summary {
+  list-style: none;
+  opacity: 1;
+}
+.Documentation-deprecatedDetails .Documentation-source {
+  opacity: 1;
 }
diff --git a/content/static/html/doc/body.tmpl b/content/static/html/doc/body.tmpl
index fa2c03b84..b2ce25f8b 100644
--- a/content/static/html/doc/body.tmpl
+++ b/content/static/html/doc/body.tmpl
@@ -167,10 +167,26 @@
 
 {{define "item"}}
   {{$id := safe_id .FullName}}
-  <h4 tabindex="-1" id="{{$id}}" data-kind="{{.Kind}}" class="{{.HeaderClass}}">
-    <span>{{.HeaderStart}} {{source_link .Name .Decl}} <a class="Documentation-idLink" href="#{{$id}}">¶</a></span>
-    {{- template "since_version" .FullName -}}
-  </h4>{{"\n"}}
-  {{- template "declaration" . -}}
-  {{- template "example" .Examples -}}
+  {{if .IsDeprecated}}
+    <details class="Documentation-deprecatedDetails">
+      <summary>
+        <h4 tabindex="-1" id="{{$id}}" data-kind="{{.Kind}}" class="{{.HeaderClass}}">
+          <span>
+            {{.HeaderStart}} {{source_link .Name .Decl}} <a class="Documentation-idLink" href="#{{$id}}">¶</a>
+              <span class="Documentation-deprecatedBody">deprecated</span>
+          </span>
+          {{- template "since_version" .FullName -}}
+        </h4>{{"\n"}}
+      </summary>
+      {{- template "declaration" . -}}
+      {{- template "example" .Examples -}}
+    </details>
+  {{else}}
+    <h4 tabindex="-1" id="{{$id}}" data-kind="{{.Kind}}" class="{{.HeaderClass}}">
+      <span>{{.HeaderStart}} {{source_link .Name .Decl}} <a class="Documentation-idLink" href="#{{$id}}">¶</a></span>
+        {{- template "since_version" .FullName -}}
+    </h4>{{"\n"}}
+    {{- template "declaration" . -}}
+    {{- template "example" .Examples -}}
+  {{end}}
 {{end}}
diff --git a/internal/godoc/dochtml/testdata/deprecated-on.golden b/internal/godoc/dochtml/testdata/deprecated-on.golden
index c9f8f91c0..f0c5c3993 100644
--- a/internal/godoc/dochtml/testdata/deprecated-on.golden
+++ b/internal/godoc/dochtml/testdata/deprecated-on.golden
@@ -57,11 +57,17 @@ Deprecated: use GoodC.
 </section>
 <h3 tabindex="-1" id="pkg-functions" class="Documentation-functionsHeader">Functions <a href="#pkg-functions">¶</a></h3>
 <section class="Documentation-functions"><div class="Documentation-function">
+<details class="Documentation-deprecatedDetails">
+<summary>
 <h4 tabindex="-1" id="BadF" data-kind="function" class="Documentation-functionHeader">
-<span>func <a class="Documentation-source" href="src">BadF</a> <a class="Documentation-idLink" href="#BadF">¶</a></span>
+<span>
+func <a class="Documentation-source" href="src">BadF</a> <a class="Documentation-idLink" href="#BadF">¶</a>
+<span class="Documentation-deprecatedBody">deprecated</span>
+</span>
 <span class="Documentation-sinceVersion">
 </span>
 </h4>
+</summary>
 <div class="Documentation-declaration">
 <pre>func BadF()</pre>
 </div>
@@ -70,6 +76,7 @@ Deprecated: use GoodC.
 </div><p>BadF is bad.
 Deprecated: use GoodF.
 </p>
+</details>
 </div><div class="Documentation-function">
 <h4 tabindex="-1" id="GoodF" data-kind="function" class="Documentation-functionHeader">
 <span>func <a class="Documentation-source" href="src">GoodF</a> <a class="Documentation-idLink" href="#GoodF">¶</a></span>
@@ -82,11 +89,17 @@ Deprecated: use GoodF.
 </div></section>
 <h3 tabindex="-1" id="pkg-types" class="Documentation-typesHeader">Types <a href="#pkg-types">¶</a></h3>
 <section class="Documentation-types"><div class="Documentation-type">
+<details class="Documentation-deprecatedDetails">
+<summary>
 <h4 tabindex="-1" id="BadT" data-kind="type" class="Documentation-typeHeader">
-<span>type <a class="Documentation-source" href="src">BadT</a> <a class="Documentation-idLink" href="#BadT">¶</a></span>
+<span>
+type <a class="Documentation-source" href="src">BadT</a> <a class="Documentation-idLink" href="#BadT">¶</a>
+<span class="Documentation-deprecatedBody">deprecated</span>
+</span>
 <span class="Documentation-sinceVersion">
 </span>
 </h4>
+</summary>
 <div class="Documentation-declaration">
 <pre>type BadT <a href="/builtin#int">int</a></pre>
 </div>
@@ -96,6 +109,7 @@ Deprecated: use GoodF.
 Deprecated: use GoodT.
 Don&#39;t use this.
 </p>
+</details>
 </div><div class="Documentation-type">
 <h4 tabindex="-1" id="GoodT" data-kind="type" class="Documentation-typeHeader">
 <span>type <a class="Documentation-source" href="src">GoodT</a> <a class="Documentation-idLink" href="#GoodT">¶</a></span>
@@ -106,11 +120,17 @@ Don&#39;t use this.
 <pre>type GoodT <a href="/builtin#int">int</a></pre>
 </div>
 <div class="Documentation-typeFunc">
+<details class="Documentation-deprecatedDetails">
+<summary>
 <h4 tabindex="-1" id="NewGoodTBad" data-kind="function" class="Documentation-typeFuncHeader">
-<span>func <a class="Documentation-source" href="src">NewGoodTBad</a> <a class="Documentation-idLink" href="#NewGoodTBad">¶</a></span>
+<span>
+func <a class="Documentation-source" href="src">NewGoodTBad</a> <a class="Documentation-idLink" href="#NewGoodTBad">¶</a>
+<span class="Documentation-deprecatedBody">deprecated</span>
+</span>
 <span class="Documentation-sinceVersion">
 </span>
 </h4>
+</summary>
 <div class="Documentation-declaration">
 <pre>func NewGoodTBad() <a href="#GoodT">GoodT</a></pre>
 </div>
@@ -119,6 +139,7 @@ Don&#39;t use this.
 </div><p>NewGoodTBad is bad.
 Deprecated: use NewGoodTGood.
 </p>
+</details>
 </div><div class="Documentation-typeFunc">
 <h4 tabindex="-1" id="NewGoodTGood" data-kind="function" class="Documentation-typeFuncHeader">
 <span>func <a class="Documentation-source" href="src">NewGoodTGood</a> <a class="Documentation-idLink" href="#NewGoodTGood">¶</a></span>
@@ -129,11 +150,17 @@ Deprecated: use NewGoodTGood.
 <pre>func NewGoodTGood() <a href="#GoodT">GoodT</a></pre>
 </div>
 </div><div class="Documentation-typeMethod">
+<details class="Documentation-deprecatedDetails">
+<summary>
 <h4 tabindex="-1" id="GoodT.BadM" data-kind="method" class="Documentation-typeMethodHeader">
-<span>func (GoodT) <a class="Documentation-source" href="src">BadM</a> <a class="Documentation-idLink" href="#GoodT.BadM">¶</a></span>
+<span>
+func (GoodT) <a class="Documentation-source" href="src">BadM</a> <a class="Documentation-idLink" href="#GoodT.BadM">¶</a>
+<span class="Documentation-deprecatedBody">deprecated</span>
+</span>
 <span class="Documentation-sinceVersion">
 </span>
 </h4>
+</summary>
 <div class="Documentation-declaration">
 <pre>func (<a href="#GoodT">GoodT</a>) BadM()</pre>
 </div>
@@ -142,6 +169,7 @@ Deprecated: use NewGoodTGood.
 </div><p>BadM is bad.
 Deprecated: use GoodM.
 </p>
+</details>
 </div><div class="Documentation-typeMethod">
 <h4 tabindex="-1" id="GoodT.GoodM" data-kind="method" class="Documentation-typeMethodHeader">
 <span>func (GoodT) <a class="Documentation-source" href="src">GoodM</a> <a class="Documentation-idLink" href="#GoodT.GoodM">¶</a></span>