diff --git a/docs/src/content/docs/elements/a-expandable.mdx b/docs/src/content/docs/elements/a-expandable.mdx
index 585df6e6dc65a6d675a63a26fe3da8e1fd428afd..be958387e4425e3402c2b89c9653b2c47ff24fcb 100644
--- a/docs/src/content/docs/elements/a-expandable.mdx
+++ b/docs/src/content/docs/elements/a-expandable.mdx
@@ -48,6 +48,28 @@ Different example confugrations of expandables.
   </a-expandable>
 </div>
 
+### An anchor link into a expandable, opens it
+
+<div class="not-content box">
+  <a href="#exampleanchor">To expandable</a>
+  <br/>
+
+  <a-expandable class="accordion" data-id="three">
+    <div slot="toggle">
+      <button class="w-full text-left rounded-md my-1">
+        <div class="headline">Expand</div>
+      </button>
+    </div>
+
+    <div>
+      <p>{paragraph(4)}</p>
+      <p>{paragraph(4)}</p>
+      <a id="exampleanchor" href="/">Home</a>
+      <p>{paragraph(4)}</p>
+    </div>
+  </a-expandable>
+</div>
+
 ### Expand a Paragraph
 
 <div class="not-content box">
diff --git a/docs/src/custom.css b/docs/src/custom.css
index 080633fb87263a346557f9515cb80c23364f697d..c4a886888c354b19711df80f5d4938f8c8447be7 100644
--- a/docs/src/custom.css
+++ b/docs/src/custom.css
@@ -2,6 +2,11 @@
 @tailwind components;
 @tailwind utilities;
 
+/* trying to prevent layout shift with unstyled elements */
+*:not(:defined) {
+  display: none;
+}
+
 /* Fonts */
 
 @font-face {
diff --git a/packages/elements/packages/expandable/src/Expandable.ts b/packages/elements/packages/expandable/src/Expandable.ts
index 1884b80ddcc1e601ff100e9a9a63b926768f4c09..5679dd4ba9a936c5ea22ae8c610fba23f43b638a 100644
--- a/packages/elements/packages/expandable/src/Expandable.ts
+++ b/packages/elements/packages/expandable/src/Expandable.ts
@@ -7,6 +7,14 @@ declare global {
   }
 }
 
+let windowLoaded = false;
+
+if (typeof window !== "undefined") {
+  window.addEventListener("load", () => {
+    windowLoaded = true;
+  });
+}
+
 let accordionIncrement = 0;
 
 /**
@@ -103,12 +111,13 @@ export class Expandable extends LitElement {
     const ev = new CustomEvent("change", { bubbles: true, cancelable: true });
     this.dispatchEvent(ev);
 
-    if (!ev.defaultPrevented)
+    if (!ev.defaultPrevented && windowLoaded) {
       this.scrollIntoView({
         behavior: "smooth",
         block: "nearest",
         inline: "nearest",
       });
+    }
   }
 
   private get content() {
@@ -148,6 +157,29 @@ export class Expandable extends LitElement {
     if (this.trigger?.contains(e.target as HTMLElement)) this.toggle();
   }
 
+  private onDeeplink = () => {
+    if (!this.opened && location.hash) {
+      const deeplink = this.querySelector(location.hash) as HTMLElement;
+      if (deeplink) {
+        this.open();
+      }
+    }
+  };
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    this.onDeeplink();
+
+    window.addEventListener("hashchange", this.onDeeplink);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+
+    window.removeEventListener("hashchange", this.onDeeplink);
+  }
+
   private renderToggle() {
     return html`<slot name="toggle" @slotchange=${this.onSlotChange} @click=${this.onClick}></slot>`;
   }