Movable Table Rows
HTML
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<div id="myTable">
<div class="row" style="border: 1px solid #ddd; padding:20px">
<li id="curso2" onclick="return showhideContent(2)" class="col-xs-6" style="text-decoration:underline; float:left; margin-top: 8px; list-style:none; cursor:pointer">Operaciones aritmeticas basicas</li>
<div class="col-xs-3 text-right myTable" style="margin-top: 8px; ">
<span class="up glyphicon glyphicon-arrow-up"></span> <span class="down glyphicon glyphicon-arrow-down"></span> <span class="toggle"></span>
</div>
</div>
<div class="row" style="border: 1px solid #ddd; padding:20px">
<li id="curso19" onclick="return showhideContent(19)" class="col-xs-6" style="text-decoration:underline; float:left; margin-top: 8px; list-style:none; cursor:pointer">CONJUNTOS NUMÉRICOS – LOS NÚMEROS REALES</li>
<div class="col-xs-3 text-right myTable" style="margin-top: 8px; ">
<span class="up glyphicon glyphicon-arrow-up"></span> <span class="down glyphicon glyphicon-arrow-down"></span> <span class="toggle"></span>
</div>
</div>
</div>
CSS
.expander {
display: none;
}
.expander td:first-child {
text-indent: 10px
}
span {
cursor: pointer;
color: #adadad;
font-family: FontAwesome;
}
span:hover {
color: #777777;
}
span.up:after {
content: '\f0aa';
}
span.down:after {
content: '\f0ab';
}
JavaScript
$(document).ready(function() {
$(".up:first").css('display', 'none');
$(".down:last").css('display', 'none');
$('#myTable').on('click', '.up, .down', function() {
shiftRow($(this));
$(".up:last").css('display', 'block');
$(".down:first").css('display', 'block');
$(".up:first").css('display', 'none');
$(".down:last").css('display', 'none');
});
});
function shiftRow(button) {
var group = button.parents(".row");
if (button.is('.up')) {
group.insertBefore(group.prev());
} else {
group.insertAfter(group.next());
}
}