From 0e73d8686d6596b8c84e166ec679f6ef7ef920b9 Mon Sep 17 00:00:00 2001
From: Matt Marcha <matt@marcha.pro>
Date: Wed, 21 Aug 2024 17:08:11 -1000
Subject: [PATCH] sect 14

---
 awesome_owl/static/src/card/card.js  | 8 ++++++++
 awesome_owl/static/src/card/card.xml | 7 +++++--
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/awesome_owl/static/src/card/card.js b/awesome_owl/static/src/card/card.js
index 2956e4a..699685f 100644
--- a/awesome_owl/static/src/card/card.js
+++ b/awesome_owl/static/src/card/card.js
@@ -13,4 +13,12 @@ export class Card extends Component {
             },
         }
     };
+
+    setup() {
+        this.toggle = useState({isOpen: true});
+    }
+
+    toggleContent() {
+        this.toggle.isOpen = !this.toggle.isOpen;
+    }
 }
\ No newline at end of file
diff --git a/awesome_owl/static/src/card/card.xml b/awesome_owl/static/src/card/card.xml
index 954a8f1..8d96a36 100644
--- a/awesome_owl/static/src/card/card.xml
+++ b/awesome_owl/static/src/card/card.xml
@@ -5,8 +5,11 @@
         <section>
             <div class="card d-inline-block m-2" style="width: 18rem;">
                 <div class="card-body">
-                    <h3 class="card-title"><t t-esc="props.title"/></h3>
-                    <p class="card-text">
+                    <h3 class="card-title">
+                        <t t-out="props.title"/>
+                        <button class="btn" t-on-click="toggleContent">Toggle</button>
+                    </h3>
+                    <p class="card-text" t-if="toggle.isOpen">
                         <t t-slot="default"/>
                     </p>
                 </div>