accordion

css/sass/components/_accordion.scss

@@ -0,0 +1,36 @@
+.accordion {
+  background-color: #eee;
+  color: #444;
+  cursor: pointer;
+  padding: 18px;
+  width: 100%;
+  border: none;
+  text-align: left;
+  outline: none;
+  font-size: 15px;
+  transition: 0.4s;
+}
+
+.active, .accordion:hover {
+  background-color: #ccc;
+}
+
+.panel {
+  padding: 0 18px;
+  background-color: white;
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.2s ease-out;
+}
+.tbm-item .accordion::before {
+  content: ">";
+  margin-right: 10px;
+}
+.tbm-item .accordion.active::before {
+  content: "v";
+  margin-right: 10px;
+}
+.accordion {
+  margin-bottom:4px;
+}
+

templates/block/block--block-content--72a4ea11-76f7-4d80-b914-1386b250fb6b.html.twig

@@ -1,40 +1,4 @@
-<style>
+<style></style>
-.accordion {
-  background-color: #eee;
-  color: #444;
-  cursor: pointer;
-  padding: 18px;
-  width: 100%;
-  border: none;
-  text-align: left;
-  outline: none;
-  font-size: 15px;
-  transition: 0.4s;
-}
-
-.active, .accordion:hover {
-  background-color: #ccc;
-}
-
-.panel {
-  padding: 0 18px;
-  background-color: white;
-  max-height: 0;
-  overflow: hidden;
-  transition: max-height 0.2s ease-out;
-}
-.tbm-item .accordion::before {
-  content: ">";
-  margin-right: 10px;
-}
-.tbm-item .accordion.active::before {
-  content: "v";
-  margin-right: 10px;
-}
-.accordion {
-  margin-bottom:4px;
-}
-</style>
 
 <p>
     Hot topics this week: <a href="/wireless">Wireless configuration;</a>&nbsp;<a href="/printing">Printing</a>