سلام من یک سری خونه جدول مانند دارم میخوام با کلیک کردن روی هر کدوم اون مستطیل پاک بشه و یکی دیگه چایگزینش بشه
این کد رو نوشتم ولی الان مشکل اینه که اگر جعبه سمت راست پاک بشه برنامه درست کار نمی کنه ممنون میشم کمک کنید ..
HTML
<div class="container">
<div id="item1" class="item">Test1</div>
<div id="item2" class="item">Test2</div>
<div id="item3" class="item">Test3</div>
<div id="item4" class="item">Test4</div>
<div id="item5" class="item">Test5</div>
<div id="item6" class="item">Test6</div>
</div>
CSS
.container {
width: 500px;
}
.item {
float: left;
width: 48%;
min-height: 187px;
border: 1px solid black;
margin: 0 1% 1em 0;
position: relative;
background: white;
transition: all .5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
}
.hide {
width: 0px;
height: 100%;
opacity:0;
margin:0;
padding:0;
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
}
java script
var items = document.getElementsByClassName('item');
for(var i = 0; i < items.length; i ++)
{
items[i].onclick = function() {
this.classList.toggle('hide');
}
};
تست کد بالا :
http://jsfiddle.net/CUzNx/61/