open/clse

scripts/App.js

@@ -37,7 +37,7 @@ $(document).ready(function(){
     // generate divs
 
     Object.values(corpi).forEach(corpus => {
-        $('#boxes' ).append(`<div class="ui-widget-content draggable resizable closable" id="${corpus['id']}"><h1>${corpus['title']}</h1><p>${corpus['content']}</p><button>X</button></div>`)
+        $('#boxes' ).append(`<div class="ui-widget-content draggable resizable" id="${corpus['id']}"><h1>${corpus['title']}</h1><p>${corpus['content']}</p><button class="closable">X</button></div>`)
         $("#icons").append(`<button onclick="$(${corpus['id']}).fadeIn()" class="icon">${corpus["glyph"]}</button>`)
     });
 
@@ -110,16 +110,8 @@ $(document).ready(function(){
 
     // close window
     $(".closable").click(function() { 
-        $( this ).fadeOut(); 
+        $( this ).parent().fadeOut(); 
       });
 
-    // open window
-    // $( ".draggable" ).each(function() {
-    //     let idid = $( this ).attr('id')
-    //     // console.log(idid)
-    //     $("#icons").append(`<button onclick="$(${idid}).fadeIn()" class="icon">${corpusglyph[idid]}</button>`)
-    // });
-
-
 
 });

styles/style.css

@@ -37,7 +37,7 @@ button{
   z-index: 2;
   cursor: grab;
   border: 2px white solid;
-  background: black
+  background: black;
 }
 
 .draggable p{
@@ -73,15 +73,15 @@ button{
 }
 
 .closable{
-
+  position: absolute;
+  top: 0;
+  right: 0;
 }
 
 .closable button{ 
   width: 30px;
   height: 30px;
-  position: absolute;
+
-  top: 0;
-  right: 0;
   
 }