Finally got this to work

Author: agriyakhetarpal

assets/theme-css/sphinx-design/_dropdown.scss

@@ -5,10 +5,31 @@ details.sd-dropdown {
     font-weight: 700;
     // don't overlap the chevron
     padding-right: 3em !important;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    -webkit-user-select: none;
     user-select: none;
+    display: inline-flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+
+    .sd-summary-text {
+      flex-grow: 1;
+      line-height: 1.5;
+      padding-right: 0.5rem;
+    }
+
+    .sd-summary-state-marker {
+      position: absolute;
+      right: 1em;
+      top: 50%;
+      transform: translateY(-50%);
+      pointer-events: none;
+      display: inline-flex;
+      align-items: center;
+    }
+
+    &:hover .sd-summary-state-marker svg {
+      opacity: 1;
+    }
   }
 
   &:hover {
@@ -54,7 +75,6 @@ details.sd-dropdown {
   summary:hover .sd-summary-up svg,
   summary:hover .sd-summary-down svg {
     opacity: 1;
-    transform: scale(1.1);
   }
 
   .sd-summary-up svg,
@@ -79,6 +99,42 @@ details.sd-dropdown {
     visibility: hidden;
   }
 
+  // Chevron transitions
+  .sd-summary-chevron-right i,
+  .sd-summary-chevron-down i {
+    display: inline-block;
+    transform-origin: center;
+    transition:
+      transform 0.25s ease-in-out,
+      opacity 0.25s ease-in-out;
+    opacity: 0.6;
+  }
+
+  // The chevron rotation animations are applied to
+  // the icon inside the dropdown title div
+  &[open] > .sd-summary-title .sd-summary-chevron-right i {
+    transform: rotate(90deg);
+  }
+
+  &[open] > .sd-summary-title .sd-summary-chevron-down i {
+    transform: rotate(180deg);
+  }
+
+  &:hover .sd-summary-chevron-right i,
+  &:hover .sd-summary-chevron-down i {
+    opacity: 1;
+    transform: scale(1.1);
+  }
+
+  // Combined transform for open state with hover
+  &[open]:hover > .sd-summary-title .sd-summary-chevron-right i {
+    transform: rotate(90deg) scale(1.1);
+  }
+
+  &[open]:hover > .sd-summary-title .sd-summary-chevron-down i {
+    transform: rotate(180deg) scale(1.1);
+  }
+
   // Hide the card body border when not open
   &:not([open]).sd-card {
     border: none;

layouts/shortcodes/dropdown.html

@@ -31,31 +31,89 @@
     body="And some content and an icon!"
 >}}
 
+{{< dropdown
+    title="Open dropdown by default"
+    icon="fa-solid fa-eye"
+    color="info"
+    open="true"
+    body="This dropdown is open by default!"
+>}}
+
+{{< dropdown
+    title="Fade in animation"
+    icon="fa-solid fa-magic"
+    animate="fade-in"
+    body="This dropdown fades in when opened."
+>}}
+
+{{< dropdown
+    title="Fade in and slide down animation"
+    icon="fa-solid fa-chart-line"
+    animate="fade-in-slide-down"
+    body="This dropdown fades in and slides down when opened."
+>}}
+
+{{< dropdown
+    title="Using chevron: `down-up`"
+    icon="fa-solid fa-cog"
+    chevron="down-up"
+    body="Notice the different chevron direction!"
+>}}
+
+{{< dropdown
+    title="A custom chevron with an animation"
+    icon="fa-solid fa-star"
+    chevron="down-up"
+    animate="fade-in"
+    color="warning"
+    body="Here's to combining different features!"
+>}}
+
 */}}
 
 {{- $dropdown := dict -}}
 {{- range $key, $value := .Params -}}
 {{- $dropdown = merge $dropdown (dict $key $value) -}}
 {{- end -}}
 
-<details class="sd-card sd-dropdown sd-mb-3">
-  {{- with $dropdown.color }}
-  <summary class="sd-summary-title sd-card-header sd-bg-{{ . }} sd-bg-text-{{ . }}">
-  {{- else }}
-    <summary class="sd-summary-title sd-card-header">
-  {{- end }}
-  {{- with $dropdown.icon }}
-  <span class="sd-summary-icon"><i class="fa {{ . }}"></i></span>
-  {{- end }}
-  {{- with $dropdown.title }}
-  {{- . }}
-  {{- else }}
-  <i class="fas fa-ellipsis-h"></i>&nbsp;
-  {{- end }}
-  </summary>
-  <div class="sd-summary-content sd-card-body">
-    {{- with (trim $dropdown.body "\n") }}
-      {{- . | markdownify }}
+{{- /* Determine chevron type based on chevron parameter, and with some defaults */ -}}
+{{- $chevronClass := "sd-summary-chevron-right" -}}
+{{- $chevronIcon := "fa-chevron-right" -}}
+{{- if eq $dropdown.chevron "down-up" -}}
+  {{- $chevronClass = "sd-summary-chevron-down" -}}
+  {{- $chevronIcon = "fa-chevron-down" -}}
+{{- end -}}
+
+{{- $detailsClasses := slice "sd-sphinx-override" "sd-dropdown" "sd-card" "sd-mb-3" -}}
+{{- with $dropdown.animate -}}
+  {{- $detailsClasses = $detailsClasses | append (printf "sd-%s" .) -}}
+{{- end -}}
+
+<details class="{{ delimit $detailsClasses " " }}"{{ if eq $dropdown.open "true" }} open="open"{{ end }}>
+  {{- $summaryClasses := slice "sd-summary-title" "sd-card-header" -}}
+  {{- with $dropdown.color -}}
+    {{- $summaryClasses = $summaryClasses | append (printf "sd-bg-%s" .) -}}
+    {{- $summaryClasses = $summaryClasses | append (printf "sd-bg-text-%s" .) -}}
+  {{- end -}}
+
+  <summary class="{{ delimit $summaryClasses " " }}">
+    {{- with $dropdown.icon }}
+    <span class="sd-summary-icon"><i class="fa {{ . }}"></i></span>
+    {{- end }}
+    <span class="sd-summary-text">
+    {{- with $dropdown.title }}
+      {{- . }}
+    {{- else }}
+      <i class="fas fa-ellipsis-h no-title sd-octicon"></i>
     {{- end }}
+    </span>
+    <span class="sd-summary-state-marker {{ $chevronClass }}">
+      <i class="fas {{ $chevronIcon }}"></i>
+    </span>
+  </summary>
+  <div class="sd-summary-content sd-card-body docutils">
+    {{ with (trim $dropdown.body "\n") }}
+    <p class="sd-card-text">{{ . | markdownify | plainify }}</p>
+    {{ end }}
   </div>
 </details>