Open card when following link

src/helper/title-to-fragment.ts

@@ -1,2 +1,2 @@
 export const titleToFragment = (title: string): string =>
-  encodeURIComponent(title.toLocaleLowerCase().replace(/\W+/g, '-'));
+  '#' + encodeURIComponent(title.toLocaleLowerCase().replace(/\W+/g, '-'));

src/page/timeline-element/timeline-element.html.ts

@@ -8,7 +8,7 @@ export const generate = (
   { date, title, description, more, links }: TimelineElementParameters,
   showMore: string
 ): html => `
-  <article id="${titleToFragment(title)}" class="timeline-element">
+  <article id="${titleToFragment(title).replace('#', '')}" class="timeline-element">
     <div class="line-container">
       <div class="line"></div>
       <p class="date">${date}</p>
@@ -17,7 +17,7 @@ export const generate = (
       <div class="figure"></div>
       <div class="lower">
         <h2>
-          <a href="#${titleToFragment(title)}">${title}</a>
+          <a href="${titleToFragment(title)}">${title}</a>
         </h2>
 
         <p class="description">${description}</p>

src/page/timeline-element/timeline-element.ts

@@ -1,4 +1,5 @@
 import { createElement } from '../../helper/create-element';
+import { titleToFragment } from '../../helper/title-to-fragment';
 import { PageElement } from '../page-element';
 import { TimelineElementParameters } from './timeline-element-parameters';
 import { generate } from './timeline-element.html';
@@ -8,50 +9,61 @@ export class TimelineElement extends PageElement {
   private more: HTMLElement;
 
   public constructor(
-    timelineElement: TimelineElementParameters,
+    private timelineElement: TimelineElementParameters,
     private readonly showMore: string,
     private readonly showLess: string
   ) {
     super(createElement(generate(timelineElement, showMore)));
-    this.isOpen = false;
     this.more = this.query('.more');
     addEventListener('resize', this.handleResize.bind(this));
 
     this.query('.info-button').addEventListener('click', this.toggleOpen.bind(this));
+
     this.attachElementByReplacing(
       '.figure',
       timelineElement.figure instanceof PageElement
         ? timelineElement.figure
         : new PageElement(createElement(timelineElement.figure))
     );
-    this.isOpen = false;
+  }
+
+  protected initialize(): void {
+    super.initialize();
+
+    if (titleToFragment(this.timelineElement.title) === window.location.hash) {
+      this.openMore();
+    }
   }
 
   private toggleOpen() {
     if (this.isOpen) {
-      this.query('.info-button p').innerText = this.showMore;
       this.closeMore();
     } else {
-      this.query('.info-button p').innerText = this.showLess;
       this.openMore();
     }
-
-    this.isOpen = !this.isOpen;
   }
 
   private openMore() {
+    this.isOpen = true;
+
+    this.query('.info-button > p').innerText = this.showLess;
+
     const deltaHeight = this.more.scrollHeight;
     this.more.style.height = `${deltaHeight.toString()}px`;
   }
 
   private closeMore() {
+    this.isOpen = false;
+
+    this.query('.info-button > p').innerText = this.showMore;
+
     this.more.style.height = '0';
   }
 
   private handleResize() {
     if (this.isOpen) {
       this.more.style.height = 'auto';
-      this.openMore.bind(this);
+      this.openMore();
     }
   }
 }