Turned rule.html into dynamic drop-downs

_layouts/create.html

@@ -13,7 +13,7 @@ layout: default
     color: gray;
   }
   /* TOOLTIP https://www.w3schools.com/css/tryit.asp?filename=trycss_tooltip_right */
-  .tooltip {
+  .button {
   position: relative;
   display: inline-block;
   float: right;
@@ -23,7 +23,7 @@ layout: default
   border-radius: 6px;
   padding: 0 5px 0 5px;
   }
-.tooltip .tooltiptext {
+.button .tooltiptext {
   visibility: hidden;
   width: 250px;
   border: 1px dotted black;
@@ -36,11 +36,27 @@ layout: default
   top: -5px;
   left: 105%;
   }
-.tooltip:hover .tooltiptext {
+.button:hover .tooltiptext {
   visibility: visible;
   }
+
+/* set invisibility as default */
+/*#s1 {display:none;}*/
+
 </style>
 
+<script>
+  function toggleVisible(id) {
+      var x = document.getElementById(id);
+      if (x.style.display === "none") {
+          x.style.display = "block";
+      } else {
+          x.style.display = "none";
+      }
+  }
+</script>
+
+
 <article class="post">
 
   <header class="post-header">
@@ -55,14 +71,6 @@ layout: default
 
   <p>Use the questions below to begin creating your community's Rule. The suggested modules are linked to (in progress) entries at <a href="https://medlabboulder.gitlab.io/democraticmediums/">Democratic Mediums</a>.</p>
 
-  <p><strong>Templates</strong>
-    [ <a href="{% link create.md %}">Default</a>
-    {% for rule in site.rules %}
-    / <a href="{{ site.baseurl }}{{ rule.url }}">{{ rule.title }}</a>
-    {% endfor %}
-    ]
-
-  
   <div class="post-content">    
     {{ content }}
   </div>
@@ -76,14 +84,19 @@ layout: default
     {{ page.community-name }}
   </h1>
 
-  <h2 id="purpose">Purpose</h2>
+  <h2 id="purpose">Purpose
+    <button onclick="toggleVisible('s1')" class="button"> + </button>
+  </h2>
+
+  <div id="s1" style="display:none">
+  
   <span class="question">What is the community’s mission?</span>
   <p contenteditable="true" class="editable">
     {{ page.mission }}
   </p>
 
   <span class="question">What core values does it hold?</span>
-  <div class="tooltip">Modules
+  <div class="button">Modules
     <span class="tooltiptext"><a href="https://medlabboulder.gitlab.io/democraticmediums/mediums/secrecy/">secrecy</a>, <a href="https://medlabboulder.gitlab.io/democraticmediums/mediums/solidarity/">solidarity</a>, <a href="https://medlabboulder.gitlab.io/democraticmediums/mediums/transparency/">transparency</a></span>
   </div>
   <p contenteditable="true" class="editable">
@@ -103,7 +116,13 @@ layout: default
     {{ page.rights }}
   </p>
 
-  <h2 id="members">Members</h2>
+  </div><!--hiding section s1-->
+
+  <h2 id="members">Members
+    <button onclick="toggleVisible('s2')" class="button"> + </button>
+  </h2>
+
+  <div id="s2" style="display:none">
   
   <span class="question">How does someone become a member?</span>
   <p contenteditable="true" class="editable">
@@ -118,8 +137,14 @@ layout: default
     {{ page.removal }}
   </p>
   <p>Modules: <a href="https://medlabboulder.gitlab.io/democraticmediums/mediums/exclusion/">exclusion</a></p>
+
+  </div><!--hiding section s2-->
   
-  <h2 id="stewards">Stewards</h2>
+  <h2 id="stewards">Stewards
+    <button onclick="toggleVisible('s3')" class="button"> + </button>
+  </h2>
+
+  <div id="s3" style="display:none">
   
   <span class="question">Who has the capacity to decide on our policies, and how do they do so?</span>
   <div class="tooltip">Modules
@@ -160,8 +185,14 @@ layout: default
   <p contenteditable="true" class="editable">
     {{ page.limits }}
   </p>
+
+  </div><!--hiding section s3-->
   
-  <h2 id="evolution">Evolution</h2>
+  <h2 id="evolution">Evolution
+    <button onclick="toggleVisible('s4')" class="button"> + </button>
+  </h2>
+
+  <div id="s4" style="display:none">
 
   <span class="question">Where do we maintain our policies and records?</span>
   <p contenteditable="true" class="editable">
@@ -172,6 +203,8 @@ layout: default
   <p contenteditable="true" class="editable">
     {{ page.modification }}
   </p>
+
+  </div><!--hiding section s4-->
   
   <p><br /></p>