html button tag for showmore/less

openSUSE · Mar 17, 2024 · fa767e9 · fa767e9
1 parent 5ff993f
commit fa767e9
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 30 deletions.
diff --git a/_includes/single-post.html b/_includes/single-post.html
@@ -44,19 +44,44 @@
 				</div>
 			</div>
 			</div>
-			<div class="card-body">
-				<a href="{{ post.original_link }}">
-					<h2>{{ post.title }}</h2>
-				</a>
-				<div class="roller">
-					<input class="roller-input" id="{{ post.guid | slugify }}" type="checkbox">
-					<label class="roller-label btn btn-primary mt-3" for="{{ post.guid | slugify }}" role="button">
-						<span class="show-more">{{ locale.showmore }}</span>
-						<span class="show-less">{{ locale.showless }}</span>
-					</label>
-					<div class="roller-item">{{ post.content }}</div>
+            <div class="card-body">
+                <a href="{{ post.original_link }}">
+                    <h2>{{ post.title }}</h2>
+                </a>
+                <div class="roller">
+                    <script type="text/javascript">
+                        function getLoad(id) {
+                            document.getElementById(`button_${id}`).addEventListener('click', function (event) {
+                                const button = event.target;
+								const elementToChange = document.getElementById(`content_${id}`);
+
+								if (button.getAttribute('aria-expanded') === 'true') {
+									button.setAttribute('aria-expanded', 'false');
+									button.innerHTML = "{{ locale.showmore }}";
+									elementToChange.style.maxHeight = "50vh";
+								} else {
+									button.setAttribute('aria-expanded', 'true');
+									button.innerHTML = "{{ locale.showless }}";
+									elementToChange.style.maxHeight = "100%";
+								}
+							});
+						}
+
+                        document.addEventListener("DOMContentLoaded", function () {
+							getLoad('{{ post.guid | slugify }}')
+						});
+					</script>
+					<div class="roller-item"
+						id="content_{{ post.guid | slugify }}">
+                        {{ post.content }}
+					</div>
+					<button class="roller-button btn btn-primary mt-3"
+						id="button_{{ post.guid | slugify }}"
+						aria-expanded="false">
+                        {{ locale.showmore }}
+					</button>
 				</div>
 			</div>
 		</div>
 	</div>
-</div>
+</div>
diff --git a/assets/css/app.css b/assets/css/app.css
@@ -58,30 +58,18 @@
   transition: all .15s ease;
   overflow: hidden;
 }
+
 .roller {
   position: relative;
-  margin-bottom: 3rem!important;
+  margin-bottom: 3rem !important;
 }
-.roller-label {
+
+.roller-button {
   position: absolute;
   top: 100%;
 }
-.roller-input {
-  display: none;
-}
-.roller-label .show-less {
-  display: none;
-}
-.roller-label .show-more {
-  display: block;
-}
-.roller-input:checked + .roller-label .show-less {
-  display: block;
-}
-.roller-input:checked + .roller-label .show-more {
-  display: none;
-}
-.roller-input:checked ~ .roller-item {
+
+.roller-button[aria-expanded="true"] ~ .roller-item {
   max-height: 100%;
   transition: all .15s ease;
   overflow: hidden;