Skip to content

Instantly share code, notes, and snippets.

@probil

probil/jsbin.yemiwo.css

Created April 13, 2014 12:33
Show Gist options
  • Save probil/10582145 to your computer and use it in GitHub Desktop.
Save probil/10582145 to your computer and use it in GitHub Desktop.
Download ZIP
Simple method to create row with description that slide out when you click on it.
Raw
jsbin.yemiwo.css
.desc-row td{
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
}
.description{
padding: 5px 8px;
border-bottom: 1px solid #ddd;
}
.table-row{
cursor:pointer;
}
Raw
jsbin.yemiwo.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<table class="table table-bordered table-responsive table-hover ">
<tr class="table-row">
<td>Name</td>
<td>Platforms</td>
<td>Description</td>
</tr>
<tr class="desc-row">
<td colspan="3">
<div style="display:none" class="description">
<p>
Simple text
</p>
</div>
</td>
</tr>
</table>
</body>
</html>
Raw
jsbin.yemiwo.js
$(".table-row").on('click',function(){
"use strict";
$(this).next().children(1).children(1).slideToggle("fast");
});
@probil
Copy link
Author

probil commented Apr 13, 2014

Simple method to create row with description that slide out when you click on it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment