From 39d54b63de0e4107a9ef78f2f17c0b1763fb0ec8 Mon Sep 17 00:00:00 2001
From: SalvadorC <salvadorcavadini+github@gmail.com>
Date: Mon, 10 May 2021 20:21:43 +0200
Subject: [PATCH] simpler component for the :else example

Proposes a simpler way of writing the toggling "Log in/out" button by avoiding duplication of button definition
---
 .../tutorial/04-logic/02-else-blocks/text.md   | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

diff --git a/site/content/tutorial/04-logic/02-else-blocks/text.md b/site/content/tutorial/04-logic/02-else-blocks/text.md
index d25a7d3897..740d9bfe63 100644
--- a/site/content/tutorial/04-logic/02-else-blocks/text.md
+++ b/site/content/tutorial/04-logic/02-else-blocks/text.md
@@ -5,15 +5,13 @@ title: Else blocks
 Since the two conditions — `if user.loggedIn` and `if !user.loggedIn` — are mutually exclusive, we can simplify this component slightly by using an `else` block:
 
 ```html
-{#if user.loggedIn}
-	<button on:click={toggle}>
-		Log out
-	</button>
-{:else}
-	<button on:click={toggle}>
-		Log in
-	</button>
-{/if}
+<button on:click={toggle}>
+	{#if user.loggedIn}
+			Log out
+	{:else}
+			Log in
+	{/if}
+</button>
 ```
 
-> A `#` character always indicates a *block opening* tag. A `/` character always indicates a *block closing* tag. A `:` character, as in `{:else}`, indicates a *block continuation* tag. Don't worry — you've already learned almost all the syntax Svelte adds to HTML.
\ No newline at end of file
+> A `#` character always indicates a *block opening* tag. A `/` character always indicates a *block closing* tag. A `:` character, as in `{:else}`, indicates a *block continuation* tag. Don't worry — you've already learned almost all the syntax Svelte adds to HTML.