Implement collapsable list for surnames on web/English

nigelhorne · Sep 18, 2024 · 6f47f4a · 6f47f4a
1 parent 8442b8e
commit 6f47f4a
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 6 deletions.
diff --git a/dynamic-site/css/web.css b/dynamic-site/css/web.css
@@ -144,11 +144,11 @@ myButton:active {
 
 /* https://www.w3schools.com/howto/howto_js_collapsible.asp */
 .collapsible {
-  background-color: #777;
+  background-color: #378de5;
   color: white;
   cursor: pointer;
   padding: 18px;
-  width: 100%;
+  width: 10%;
   border: none;
   text-align: left;
   outline: none;

diff --git a/dynamic-site/templates/en/web/Ged2site/Display/surnames.tmpl b/dynamic-site/templates/en/web/Ged2site/Display/surnames.tmpl
@@ -64,7 +64,7 @@
 				[% FOREACH surname IN surnames %]
 					[% IF surname.surname.substr(0,1) != initial %]
 						[% IF initial %]
-							</ul>
+							</div>
 						[% END %]
 						[% IF surname.surname == 'UNKNOWN' %]
 							[% initial = '?' %]
@@ -75,14 +75,16 @@
 							-->
 							[% initial = surname.surname.substr(0,1) %]
 						[% END %]
-						<h2>[% initial %]</h2>
-						<ul id="nav">
+						<br>
+						<button class="collapsible">[% initial %]</button>
+                                                <div class="content">
+						<p>
 					[% END %]
 					<li>
 						<a href="?page=surnames&amp;surname=[%- surname.surname | uri -%]">[% surname.surname %]</a>
 					</li>
 				[% END %]
-				</ul>
+				</div>
 			[% ELSIF people %]
 				<br>
 				<ul id="nav">