✨ Added option to collapseand expand fieldsets

index.html

@@ -76,7 +76,8 @@
       </div>
     </header>
     <fieldset class="request">
-      <legend>Request</legend>
+      <legend v-on:click="collapse">Request ⇵</legend>
+      <div class="collapsible">
         <ul>
           <li>
             <label for="method">Method</label>
@@ -101,9 +102,11 @@
             <button name="action" @click="sendRequest">Send</button>
           </li>
         </ul>
+      </div>
     </fieldset>
     <fieldset class="authentication">
-      <legend>Authentication</legend>
+      <legend v-on:click="collapse">Authentication ⇵</legend>
+      <div class="collapsible">
         <ul>
           <li>
             <label for="auth">Authentication Type</label>
@@ -123,9 +126,11 @@
             <input v-model="httpPassword" type="password">
           </li>
         </ul>
+      </div>
     </fieldset>
     <fieldset class="parameters">
-      <legend>Parameters</legend>
+      <legend v-on:click="collapse">Parameters ⇵</legend>
+      <div class="collapsible">
         <ol v-for="(param, index) in params">
           <li>
             <label :for="'param'+index">Key {{index + 1}}</label>
@@ -152,9 +157,11 @@
             <textarea name="request" rows="1" readonly>{{queryString || '(add atleast one parameter)'}}</textarea>
           </li>
         </ul>
+      </div>
     </fieldset>
     <fieldset class="reqbody" v-if="method === 'POST' || method === 'PUT'">
-      <legend>Request Body</legend>
+      <legend v-on:click="collapse">Request Body ⇵</legend>
+      <div class="collapsible">
         <ol v-for="(param, index) in bodyParams">
           <li>
             <label :for="'bparam'+index">Key {{index + 1}}</label>
@@ -188,9 +195,11 @@
             <textarea name="request" rows="1" readonly>{{rawRequestBody || '(add atleast one parameter)'}}</textarea>
           </li>
         </ul>
+      </div>
     </fieldset>
-    <fieldset class="5 response" id="response" ref="response">
-      <legend>Response</legend>
+    <fieldset class="response" id="response" ref="response">
+      <legend v-on:click="collapse">Response ⇵</legend>
+      <div class="collapsible">
         <ul>
           <li>
             <label for="status">Status</label>
@@ -204,6 +213,7 @@
           </li>
         </ul>
         <textarea rows="5" readonly>{{response.body}}</textarea>
+      </div>
     </fieldset>
     <footer>
       <a href="https://github.com/liyasthomas/postwoman"><img src="icons/github.svg" alt="" style="margin-right: 16px">GitHub</a>

script.js

@@ -65,6 +65,12 @@ const app = new Vue({
     }
   },
   methods: {
+    collapse({
+      target
+    }) {
+      const el = target.parentNode.className
+      document.getElementsByClassName(el)[0].classList.toggle('hidden')
+    },
     sendRequest() {
       this.$refs.response.scrollIntoView({
         behavior: 'smooth'

style.css

@@ -92,6 +92,7 @@ fieldset {
 legend {
   color: #57b5f9;
   font-weight: 700;
+  cursor: pointer;
 }
 
 fieldset textarea {
@@ -138,19 +139,23 @@ fieldset.response legend {
   color: #C198FB;
 }
 
+.hidden .collapsible {
+  display: none;
+}
+
 select,
 input,
 option,
 textarea {
-  background-color: #000;
-  border-radius: 4px;
-  font-size: 18px;
-  padding: 8px 16px;
-  color: var(--fg-color);
   margin: 4px;
-  font-family: monospace;
-  font-weight: 700;
+  padding: 8px 16px;
   width: calc(100% - 8px);
+  border-radius: 4px;
+  background-color: #000;
+  color: var(--fg-color);
+  font-weight: 700;
+  font-size: 18px;
+  font-family: monospace;
 }
 
 label {
@@ -159,10 +164,10 @@ label {
 
 ul,
 ol {
+  display: flex;
   margin: 8px 0 0;
   padding: 0;
   list-style-type: none;
-  display: flex;
 }
 
 ul li,
@@ -183,3 +188,4 @@ ol li {
   ol li {
     display: flex;
   }
+}