add accordion for additional filters

app/public/accordion.css

@@ -0,0 +1,41 @@
+.accordion label {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  background-color: #02adba;
+  color: white;
+  padding-left: 15px;
+  height: 3em;
+  line-height: 0.5em;
+  font-size: medium;
+  cursor: pointer;
+  border-bottom: 1px solid #bdbdbd;
+  border-top: 1px solid #ffffff;
+}
+.accordion p {
+  color: #424242;
+  padding: 10px;
+  font-size: 0.8em;
+  line-height: 1.7em;
+  opacity: 0;
+  display: none;
+  text-align: left;
+  background-color: #fff;
+  margin: 0px;
+}
+#tm:checked ~ .hiddentext {
+  display: block;
+  opacity: 1;
+}
+input#tm {
+  display: none;
+  position: relative;
+}
+.arrow {
+  color: #02adba;
+}
+
+.accordion-title {
+  font-size: 2em;
+}

app/views/layout.ejs

@@ -19,6 +19,7 @@
   <meta charset="UTF-8" />
   <link rel="stylesheet" href="/assets/main.css">
   <link rel="stylesheet" href="/assets/segment.css">
+  <link rel="stylesheet" href="/assets/accordion.css">
 
   <link rel="apple-touch-icon" sizes="180x180" href="/assets/apple-touch-icon.png">
   <link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon-32x32.png">

app/views/realEstateFilters.ejs

@@ -4,7 +4,9 @@
   <div class="row center-align">
     <h5>Cijena</h5>
     <br><br>
-    <div class="center-align no-ui-slider" id="priceFilter"></div>
+    <div class="col s12">
+      <div class="center-align no-ui-slider" id="priceFilter"></div>
+    </div>
   </div>
 
   <br>
@@ -23,7 +25,9 @@
   <div class="row center-align">
     <h5>Površina</h5>
     <br><br>
-    <div class="center-align no-ui-slider" id="sizeFilter"></div>
+    <div class="col s12">
+      <div class="center-align no-ui-slider" id="sizeFilter"></div>
+    </div>
   </div>
 
   <br>
@@ -43,7 +47,9 @@
     <div class="row center-align">
       <h5>Površina okućnice</h5>
       <br><br>
-      <div class="center-align no-ui-slider" id="gardenSizeFilter"></div>
+      <div class="col s12">
+        <div class="center-align no-ui-slider" id="gardenSizeFilter"></div>
+      </div>
     </div>
 
     <br>
@@ -58,6 +64,16 @@
     </div>
   <% } %>
 
+  <div class="row">
+    <div class="col s12">
+      <div class="accordion">
+        <label for="tm" class="accordionitem valign-wrapper">Dodatni filteri &raquo;</label>
+        <input type="checkbox" id="tm"/>
+        <p class="hiddentext"> Filteri</p>
+      </div>
+    </div>
+  </div>
+
   <div class="row">
     <div class="col s6 push-s3">
       <a id="submit" href="#" class="welcome-center-button waves-effect waves-light btn">Dalje</a>