Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<link href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div class="ilan_alani">
    <div class="note_area">
        <div class="hidemenu"> 
          <form method="post" onclick="return false;">
          <input type='submit' name='Delete' value='Delete' class='psdlt' />
          </form></div>
    </div>
    <div class="test"></div>
    <div class="showmenu">Shows</div>
</div>
​
<div class="ilan_alani">
    <div class="note_area">
        <div class="hidemenu"> <form method="post" onclick="return false;">
          <input type='submit' name='Delete' value='Delete' class='psdlt' />
          </form></div>
    </div>
    <div class="test"></div>
    <div class="showmenu">Show</div>
</div>
</body>
</html>
 
.ilan_alani {
    margin-top:40px;
    width:630px;
    height:190px;
    margin:0px auto;
    border:1px solid #d8dbdf;
}
.test {
    float:left;
    width:250px;
    height:190px;
    background-color:red;
}
.note_area {
    float:left;
    width:630px;
    height:190px;
    background: rgba(25, 25, 25, .5);
    display:none;
    position:absolute;
}
.hidemenu {
    background:red;
}
 
$(document).ready(function () {
​
    $('.ilan_alani').on('click', '.showmenu', function(e) {
        var $ilan_alani = e.delegateTarget;
        $('.note_area', $ilan_alani).toggle('puff');
        $('.showmenu', $ilan_alani).hide();
        $('.hidemenu', $ilan_alani).show();
    })
    .on('click', '.hidemenu', function(e) {
        var $ilan_alani = e.delegateTarget;
        $('.note_area', $ilan_alani).toggle("puff");
        $(".hidemenu", $ilan_alani).hide();
        $(".showmenu", $ilan_alani).show();
    });
  $('.ilan_alani .psdlt').click(function() {
  $(this).parents('.ilan_alani').animate({ opacity: 'hide' }, 'slow');
});
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers