diff --git a/src/app/_modules/widjet/drop-down/drop-down.component.ts b/src/app/_modules/widjet/drop-down/drop-down.component.ts
index e3f1a25..7c94bfe 100644
--- a/src/app/_modules/widjet/drop-down/drop-down.component.ts
+++ b/src/app/_modules/widjet/drop-down/drop-down.component.ts
@@ -12,16 +12,30 @@ export class DropDownComponent {
   @Input() visible = false;
   @Input() target:HTMLElement;
 
+  @Output() toggle =  new EventEmitter<boolean>()
+
   ngOnChanges(){
-    if(this.target) this.target.hidden = !this.visible;
+    this.setToggle()
   }
 
-  @Output() toggle =  new EventEmitter<boolean>()
+
 
   
   click(){    
     this.visible = !this.visible;
-    if(this.target) this.target.hidden = !this.visible;
+
+    this.setToggle()
+    
     this.toggle.emit(this.visible)
   }
+
+  setToggle(){
+    if(this.target) {
+      if(this.visible){
+        this.target.classList.remove('toggle-hide')
+      }else{
+        this.target.classList.add('toggle-hide')
+      }
+    };
+  }
 }
diff --git a/src/assets/css/_basics.scss b/src/assets/css/_basics.scss
index 149e387..9ab82e5 100644
--- a/src/assets/css/_basics.scss
+++ b/src/assets/css/_basics.scss
@@ -22,6 +22,10 @@
 //   text-transform: uppercase;
 // }
 
+.toggle-hide{
+  visibility: collapse;
+}
+
 .menu, .page-header {
   display: flex;
   .block {