rewrite dropdown in search view

app/assets/stylesheets/application.scss

@@ -33,6 +33,20 @@ a, a:focus, a:hover {
 	color: #000;
 }
 
+.caret {
+	border-left: 7px solid transparent;
+	border-right: 7px solid transparent;
+	border-top: 7px solid #000000;
+}
+.caret-up {
+	transform: rotate(180deg);
+}
+.caret-align-right {
+	position: absolute;
+  left: 90%;
+  top: 45%;
+}
+
 //// HEADER
 header {
   border: 0;

app/views/search/solr/search.html.erb

@@ -2,13 +2,21 @@
   $(document).ready(function() {
     $(".select-tag-container").select2();
 
-    $('#nestedAccordion .dropdown').click(function(){
-      if ($(this).next().is(':hidden')) {
-        $(this).next().slideDown();
+    var runDropdown = function(element) {
+      if ($(element).next().is(':hidden')) {
+        $('> .caret', element).addClass('caret-up');
+        $(element).next().slideDown();
       }
       else {
-        $(this).next().slideUp();
+        $('> .caret', element).removeClass('caret-up');
+        $(element).next().slideUp();
       }
+    };
+
+    runDropdown($('#nestedAccordion .dropdown'));
+
+    $('#nestedAccordion .dropdown').click(function () {
+      runDropdown(this);
     });
   });
 </script>
@@ -27,9 +35,9 @@
     </div> -->
 
     <div id="nestedAccordion">
-      <h3 class="dropdown">Matérias <span class="caret" /></h3>
+      <h3 class="dropdown">Matérias<span class="caret caret-align-right" /></h3>
       <div class='aberto'>
-        <h4 class="dropdown">Matemática</h4>
+        <h4 class="dropdown">Matemática<span class="caret caret-align-right" /></h4>
         <div>
           <select class="select-tag-container" multiple="multiple">
             <option value="">Todos</option>
@@ -43,7 +51,7 @@
             </optgroup>
           </select>
         </div>
-        <h4 class="dropdown">Biologia</h4>
+        <h4 class="dropdown">Biologia<span class="caret caret-align-right" /></h4>
         <div>
           <select class="select-tag-container" multiple="multiple">
             <option value="">Todos</option>
@@ -56,7 +64,7 @@
             </optgroup>
           </select>
         </div>
-        <h4 class="dropdown">História</h4>
+        <h4 class="dropdown">História<span class="caret caret-align-right" /></h4>
         <div>
           <select class="select-tag-container" multiple="multiple">
             <option value="">Todos</option>
@@ -69,7 +77,7 @@
             </optgroup>
           </select>
         </div>
-        <h4 class="dropdown">Língua Portuguesa</h4>
+        <h4 class="dropdown">Língua Portuguesa<span class="caret caret-align-right" /></h4>
         <div>
           <select class="select-tag-container" multiple="multiple">
             <option value="">Todos</option>
@@ -82,7 +90,7 @@
             </optgroup>
           </select>
         </div>
-        <h4 class="dropdown">Geografia</h4>
+        <h4 class="dropdown">Geografia<span class="caret caret-align-right" /></h4>
         <div>
           <select class="select-tag-container" multiple="multiple">
             <option value="">Todos</option>
@@ -95,7 +103,7 @@
             </optgroup>
           </select>
         </div>
-        <h4 class="dropdown">Ciências</h4>
+        <h4 class="dropdown">Ciências<span class="caret caret-align-right" /></h4>
         <div>
           <select class="select-tag-container" multiple="multiple">
             <option value="">Todos</option>
@@ -108,7 +116,7 @@
             </optgroup>
           </select>
         </div>
-        <h4 class="dropdown">Educação Física</h4>
+        <h4 class="dropdown">Educação Física<span class="caret caret-align-right" /></h4>
         <div>
           <select class="select-tag-container" multiple="multiple">
             <option value="">Todos</option>
@@ -121,7 +129,7 @@
             </optgroup>
           </select>
         </div>
-        <h4 class="dropdown">Inglês</h4>
+        <h4 class="dropdown">Inglês<span class="caret caret-align-right" /></h4>
         <div>
           <select class="select-tag-container" multiple="multiple">
             <option value="">Todos</option>
@@ -135,7 +143,7 @@
           </select>
         </div>
       </div><!--fim materias -->
-      <h3 class="dropdown">Conteúdo</h3><!--Tipo 1-->
+      <h3 class="dropdown">Conteúdo<span class="caret caret-align-right" /></h3><!--Tipo 1-->
       <div class='aberto'>
         <table class="tipo1" style="width:100%">
           <tr>
@@ -243,7 +251,7 @@
               <input type="checkbox">Planos de Aula
             </div>
         </div> -->
-      <h3 class="dropdown">Ano escolar</h3>
+      <h3 class="dropdown">Ano escolar<span class="caret caret-align-right" /></h3>
       <div>
         <table style="width:100%">
           <tr>
@@ -264,7 +272,7 @@
           </tr>
         </table>
       </div>
-      <h3 class="dropdown">Ano de Publicação</h3>
+      <h3 class="dropdown">Ano de Publicação<span class="caret caret-align-right" /></h3>
       <div>
         <input type="radio" name="ano" value="single" checked>Ano:<br/>
         <input type="text" name="ano1" size="8">
@@ -275,7 +283,7 @@
     </div><!-- fim div id="nestedAccordion"-->
 
     <div id="nestedAccordion">
-      <h3 class="dropdown">Pesquisa Avançada</h3>
+      <h3 class="dropdown">Pesquisa Avançada<span class="caret caret-align-right" /></h3>
       <form method="get">
         <div>
           <table style="width:100%">