Eliminate extra div layer

Author: distantnative

site/plugins/site/src/Marsdown/Marsdown.php

@@ -105,11 +105,18 @@ protected function blockGroupsTabsComplete(array $Block): array
 			$titles[1]
 		);
 
+		$id = Str::random(3);
+
 		return [
 			'element' => [
 				'name' => 'div',
+				'attributes' => [
+					'class' => 'tabs',
+					'id'    => 'tabs-' . $id
+				],
 				'rawHtml' => snippet('kirbytext/tabs', [
-					'tabs' => $tabs ?? []
+					'id'   => $id,
+					'tabs' => $tabs,
 				], true),
 			]
 		];

site/snippets/kirbytext/tabs.php

@@ -1,25 +1,19 @@
-<?php
-$uuid = Str::uuid();
-?>
-
-<div class="tabs" id="tabs-<?= $uuid ?>">
-	<menu>
-		<?php foreach ($tabs as $key => $tab): ?>
-		<button
-			:aria-current="current === '<?= $key ?>'"
-			@click="current = '<?= $key ?>'"
-		>
-			<?= $tab['title'] ?>
-		</button>
-		<?php endforeach ?>
-	</menu>
-
+<menu>
 	<?php foreach ($tabs as $key => $tab): ?>
-	<div v-show="current === '<?= $key ?>'">
-		<?= $tab['content'] ?>
-	</div>
+	<button
+		:aria-current="current === '<?= $key ?>'"
+		@click="current = '<?= $key ?>'"
+	>
+		<?= $tab['title'] ?>
+	</button>
 	<?php endforeach ?>
+</menu>
+
+<?php foreach ($tabs as $key => $tab): ?>
+<div v-show="current === '<?= $key ?>'">
+	<?= $tab['content'] ?>
 </div>
+<?php endforeach ?>
 
 <script type="module">
 import {
@@ -28,5 +22,5 @@
 
 createApp({
 	current: "<?= array_keys($tabs)[0] ?>",
-}).mount("#tabs-<?= $uuid ?>")
+}).mount("#tabs-<?= $id ?>")
 </script>