From c11b84120d3cf7b0ac745a15516a355fe8e4cfde Mon Sep 17 00:00:00 2001
From: Carson Gross <carson@bigsky.software>
Date: Fri, 31 Mar 2023 13:53:16 -0600
Subject: [PATCH] better example

---
 test/scratch/scratch.html  | 17 ++++++++++++-----
 www/examples/animations.md | 19 ++++++++++++-------
 2 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/test/scratch/scratch.html b/test/scratch/scratch.html
index 1c573a9e..6cacd3d2 100644
--- a/test/scratch/scratch.html
+++ b/test/scratch/scratch.html
@@ -81,11 +81,6 @@ Autorespond: <input id="autorespond" type="checkbox" onclick="toggleAutoRespond(
         hx-swap="innerHTML transition:true">Issue Request</button>
 <h1 id="h1">--</h1>
 
-<script>
-    this.server.respondWith("GET", "/new-content", function(xhr){
-        xhr.respond(200,  {}, "<h1>New Content</h1>")
-    });
-</script>
 
 <style>
     @keyframes fade-in {
@@ -126,6 +121,18 @@ Autorespond: <input id="autorespond" type="checkbox" onclick="toggleAutoRespond(
     </button>
 </div>
 
+<script>
+    var originalContent = htmx.find(".slide-it").innerHTML;
+
+    this.server.respondWith("GET", "/new-content", function(xhr){
+        xhr.respond(200,  {}, "<h1>Initial Content</h1> <button hx-get='/original-content' hx-swap='innerHTML transition:true' hx-target='closest div'>Restore It! </button>")
+    });
+
+    this.server.respondWith("GET", "/original-content", function(xhr){
+        xhr.respond(200,  {}, originalContent)
+    });
+</script>
+
 
 </body>
 </html>
diff --git a/www/examples/animations.md b/www/examples/animations.md
index 853d06c7..82e1f4d4 100644
--- a/www/examples/animations.md
+++ b/www/examples/animations.md
@@ -295,12 +295,6 @@ implement this feature in the near future.
 
 #### Demo
 
-<script>
-    this.server.respondWith("GET", "/new-content", function(xhr){
-        xhr.respond(200,  {}, "<h1>New Content</h1>")
-    });
-</script>
-
 <style>
    @keyframes fade-in {
      from { opacity: 0; }
@@ -332,7 +326,6 @@ implement this feature in the near future.
    }
 </style>
 
-
 <div class="slide-it">
    <h1>Initial Content</h1>
    <button hx-get="/new-content" hx-swap="innerHTML transition:true" hx-target="closest div">
@@ -340,6 +333,18 @@ implement this feature in the near future.
    </button>
 </div>
 
+<script>
+    var originalContent = htmx.find(".slide-it").innerHTML;
+
+    this.server.respondWith("GET", "/new-content", function(xhr){
+        xhr.respond(200,  {}, "<h1>Initial Content</h1> <button hx-get='/original-content' hx-swap='innerHTML transition:true' hx-target='closest div'>Restore It! </button>")
+    });
+
+    this.server.respondWith("GET", "/original-content", function(xhr){
+        xhr.respond(200,  {}, originalContent)
+    });
+</script>
+
 #### Conclusion
 
 You can use the techniques above to create quite a few interesting and pleasing effects with plain old HTML while using htmx.