refactor hiding/showing vm details to class

one/static/style.css

@@ -89,6 +89,9 @@ a:link,a:visited{
   padding: 15px 5px;
   padding: 15px 5px;
   display: none;
   display: none;
 }
 }
+.wm.opened .details{
+  display: block;
+}
 .wm .details h3{
 .wm .details h3{
   font-weight: normal;
   font-weight: normal;
 }
 }

one/templates/base.html

@@ -20,8 +20,9 @@ $(function(){
             $(this).next('.details')
             $(this).next('.details')
                 .css('height',0)
                 .css('height',0)
                 .css('padding','0px 5px')
                 .css('padding','0px 5px')
-                .show()
                 .animate({height:this.originalHeight,paddingTop:15,paddingBottom:15},700);
                 .animate({height:this.originalHeight,paddingTop:15,paddingBottom:15},700);
+            $(this).parent('.wm').addClass('opened');
+
         } else {
         } else {
             var that=this;
             var that=this;
             $(this).next('.details')
             $(this).next('.details')
@@ -29,7 +30,7 @@ $(function(){
                 .css('height',this.originalHeight-30)
                 .css('height',this.originalHeight-30)
                 .css('padding','15px 5px')
                 .css('padding','15px 5px')
                 .animate({height:0,paddingTop:0,paddingBottom:0},700,function(){
                 .animate({height:0,paddingTop:0,paddingBottom:0},700,function(){
-                $(that).next('.details').hide();
+                $(that).parent('.wm').removeClass('opened');
             });
             });
         }
         }
     }
     }

one/templates/box-vmlist.html

@@ -29,7 +29,7 @@
         </div>
         </div>
         <div class="clear"></div>
         <div class="clear"></div>
     </div>
     </div>
-    <div class="details" style="display: none">
+    <div class="details">
         <h3>Részletek</h3>
         <h3>Részletek</h3>
         <ul>
         <ul>
             <li class="name">Gép neve: <span class="value">{{i.name}}</span></li>
             <li class="name">Gép neve: <span class="value">{{i.name}}</span></li>