JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/cupertino/jquery-ui.css">
<script src="http://jquery-ui.googlecode.com/svn/trunk/ui/i18n/jquery.ui.datepicker-ru.js"></script>
<table class='buttons_table'>
<tr>
<td>
<div class='row'>
<div class='folder'><span class='button gray medium'>xxxx</span></div>
</div>
</td>
</tr>
</table>
<div class='folderContent'>
<span class='folderName'>
<form action='xxx.php' method='post'>
<table class='input_text'>
<tr>
<td>date : </td>
<td>
<input id="datepicker" type="text" name="year" />
</td>
</tr>
</table>
</form>
</span>
</div>
JavaScript
$(function() {
$.datepicker.setDefaults($.extend($.datepicker.regional["ru"]));
$("#datepicker").datepicker();
$(".folderContent").hide();
//arrange the background image starting position for all the rows.
//This will allow the background image cut illusion when showing the folder content panel
$(".row").each(function() {
});
//when a folder is clicked,
//position the content folder after the clicked row
//and toggle all folder / app icon that is not the one clicked.
//and toggle the folder content panel
$(".folder").click(function(event) {
var folderContent = $(".folderContent");
folderContent.detach();
var folderContentShown = folderContent.css("display") != "none";
var clickedFolder = $(this);
clickedFolder.parent(".row").after(folderContent);
folderContent.find(".folderName").html();
$("body").find(".folder, .app").not(clickedFolder).each(function() {
if (!folderContentShown) $(this).animate({
opacity: 0.00
}, "slow");
else $(this).animate({
opacity: 1.00
}, "slow");
});
//clickedFolder.animate({opacity: folderContentShown ? 1.00 : 0.70}, "slow");
folderContent.slideToggle("slow");
event.preventDefault();
});
});