diff --git a/layouts/partials/javascript.html b/layouts/partials/javascript.html
index c27fc4071..37105da88 100644
--- a/layouts/partials/javascript.html
+++ b/layouts/partials/javascript.html
@@ -403,7 +403,7 @@
     () => {
       "use strict";
       const hash = (window.location.hash).slice(1);
-      const cardContents = document.querySelectorAll(".card-content");
+      const cardContents = document.querySelectorAll(".card-content-dropdown");
       cardContents.forEach((item) => {
         const id = item.getAttribute("id");
         if (hash === id) {
diff --git a/layouts/shortcodes/faq20.html b/layouts/shortcodes/faq20.html
index 373b0e1cf..75c294338 100644
--- a/layouts/shortcodes/faq20.html
+++ b/layouts/shortcodes/faq20.html
@@ -13,7 +13,7 @@ <h2 id="general">General</h2>
     </p>
     <button class="copyBtn" id="{{ $id }}"><i class="fas fa-link" style="color: #0c0d0d;"></i></button>
   </header>
-  <div class="card-content" x-show="open" id="{{ $id }}">
+  <div class="card-content card-content-dropdown" x-show="open" id="{{ $id }}">
     <div class="content is-medium has-text-grey-dark">
       {{ $answer }}
     </div>
@@ -34,7 +34,7 @@ <h2 id="best-practices">Best Practices</h2>
     </p>
     <button class="copyBtn" id="{{ $id }}"><i class="fas fa-link" style="color: #0c0d0d;"></i></button>
   </header>
-  <div class="card-content" x-show="open" id="{{ $id }}">
+  <div class="card-content card-content-dropdown" x-show="open" id="{{ $id }}">
     <div class="content is-medium has-text-grey-dark">
       {{ $answer }}
     </div>
@@ -55,7 +55,7 @@ <h2 id="features">Features</h2>
     </p>
     <button class="copyBtn" id="{{ $id }}"><i class="fas fa-link" style="color: #0c0d0d;"></i></button>
   </header>
-  <div class="card-content" x-show="open" id="{{ $id }}">
+  <div class="card-content card-content-dropdown" x-show="open" id="{{ $id }}">
     <div class="content is-medium has-text-grey-dark">
       {{ $answer }}
     </div>
@@ -76,7 +76,7 @@ <h2 id="kubernetes">Kubernetes</h2>
     </p>
     <button class="copyBtn" id="{{ $id }}"><i class="fas fa-link" style="color: #0c0d0d;"></i></button>
   </header>
-  <div class="card-content" x-show="open" id="{{ $id }}">
+  <div class="card-content card-content-dropdown" x-show="open" id="{{ $id }}">
     <div class="content is-medium has-text-grey-dark">
       {{ $answer }}
     </div>
@@ -97,7 +97,7 @@ <h2 id="community">Community</h2>
     </p>
     <button class="copyBtn" id="{{ $id }}"><i class="fas fa-link" style="color: #0c0d0d;"></i></button>
   </header>
-  <div class="card-content" x-show="open" id="{{ $id }}">
+  <div class="card-content card-content-dropdown" x-show="open" id="{{ $id }}">
     <div class="content is-medium has-text-grey-dark">
       {{ $answer }}
     </div>
@@ -118,7 +118,7 @@ <h2 id="website">Website</h2>
     </p>
     <button class="copyBtn" id="{{ $id }}"><i class="fas fa-link" style="color: #0c0d0d;"></i></button>
   </header>
-  <div class="card-content" x-show="open" id="{{ $id }}">
+  <div class="card-content card-content-dropdown" x-show="open" id="{{ $id }}">
     <div class="content is-medium has-text-grey-dark">
       {{ $answer }}
     </div>
@@ -141,7 +141,7 @@ <h3>Microsoft Azure</h3>
     </p>
     <button class="copyBtn" id="{{ $id }}"><i class="fas fa-link" style="color: #0c0d0d;"></i></button>
   </header>
-  <div class="card-content" x-show="open" id="{{ $id }}">
+  <div class="card-content card-content-dropdown" x-show="open" id="{{ $id }}">
     <div class="content is-medium has-text-grey-dark">
       {{ $answer }}
     </div>