I've developping on my website a way of sorting divs (.ligne) with various sorting options. sort by name, by date, by status, and by type. I have a jquery code that works well, I need to work it a little bit more to lighten it, but it works.
each div has a children div, when clicking on the div, the children div slidetoglle. works fine also.
I'm not using any plugin, only bootstrap css.
but as soon as I've clicked to sort my div, the slidetoggle of the children divs don't work anymore. can't find out from where it comes...
for example, when you first load the page, try to click on "AGDE CAPE HOTEL", the divs opens itself fine. but as soon as you click on an arrow to sort the content, it doesn't work anymore...
here is my HTML :
<div class="container titre">
<div class="row">
<div class="col-xs-3 text-right">
<div class="title">PROJECT</div>
<span id="nom_ASC" class="sort">↓</span> <span id="nom_DSC" class="sort">↑</span>
</div>
<div class="col-xs-3 text-right">
<div class="title">YEAR</div><span id="annee_ASC" class="sort">↓ </span> <span id="annee_DSC" class="sort">↑</span>
</div>
<div class="col-xs-3 text-right">
<div class="title">STATUS</div><span id="statut_ASC" class="sort">↓</span> <span id="statut_DSC" class="sort">↑</span>
</div>
<div class="col-xs-3 text-right">
<div class="title">TYPE</div><span id="type_ASC" class="sort">↓</span> <span id="type_DSC" class="sort">↑</span>
</div>
</div>
</div>
<div id="index" class="container">
<div class="row ligne">
<div class="col-xs-3 nom">130 HOUSING UNITS ROMAINVILLE</div>
<div class="col-xs-3 annee">2010</div>
<div class="col-xs-3 statut">BUILT</div>
<div class="col-xs-3 type">LIVE</div>
<div class="col-xs-12 content">
Quam quidem partem accusationis admiratus sum et moleste tuli potissimum esse Atratino datam. Neque enim decebat neque aetas illa postulabat neque, id quod animadvertere poteratis, pudor patiebatur optimi adulescentis in tali illum oratione versari. Vellem aliquis ex vobis robustioribus hunc male dicendi locum suscepisset; aliquanto liberius et fortius et magis more nostro refutaremus istam male dicendi licentiam. Tecum, Atratine, agam lenius, quod et pudor tuus moderatur orationi meae et meum erga te parentemque tuum beneficium tueri debeo.
</div>
</div>
<div class="row ligne">
<div class="col-xs-3 nom">AGDE CAPE HOTEL</div>
<div class="col-xs-3 annee">2013</div>
<div class="col-xs-3 statut">ON GOING</div>
<div class="col-xs-3 type">LEISURE</div>
<div class="col-xs-12 content">
Quam quidem partem accusationis admiratus sum et moleste tuli potissimum esse Atratino datam. Neque enim decebat neque aetas illa postulabat neque, id quod animadvertere poteratis, pudor patiebatur optimi adulescentis in tali illum oratione versari. Vellem aliquis ex vobis robustioribus hunc male dicendi locum suscepisset; aliquanto liberius et fortius et magis more nostro refutaremus istam male dicendi licentiam. Tecum, Atratine, agam lenius, quod et pudor tuus moderatur orationi meae et meum erga te parentemque tuum beneficium tueri debeo.
</div>
</div>
<div class="row ligne">
<div class="col-xs-3 nom">AIRBUS DELIVERY CENTER</div>
<div class="col-xs-3 annee">2013</div>
<div class="col-xs-3 statut">ON GOING</div>
<div class="col-xs-3 type">WORK</div>
</div>
<div class="row ligne">
<div class="col-xs-3 nom">HACHETTE LIVRE HEADQUARTERS</div>
<div class="col-xs-3 annee">2015</div>
<div class="col-xs-3 statut">BUILT</div>
<div class="col-xs-3 type">MOVE</div>
</div>
<div class="row ligne">
<div class="col-xs-3 nom">COLLEGE DE FRANCE</div>
<div class="col-xs-3 annee">2016</div>
<div class="col-xs-3 statut">ON GOING</div>
<div class="col-xs-3 type">LEARN</div>
</div>
</div>
my CSS :
body {font-size:12px;line-height:16px;}
.row.ligne {border-top:1px solid black;cursor:pointer}
.content {display:none}
.title {position: absolute}
.titre {position:fixed;width:100%;background-color:white;z-index:100}
#index {padding-top:16px;}
.sort {cursor:pointer}
the Jquery for sorting :
var $divs = $("div.row.ligne");
/* VILLE */
$('#nom_ASC').on('click', function () {
var alphabeticallyOrderedDivs = $divs.sort(function (a, b) {
return $(a).find(".nom").text() > $(b).find(".nom").text();
});
$("#index").html(alphabeticallyOrderedDivs);
});
$('#nom_DSC').on('click', function () {
var alphabeticallyOrderedDivs = $divs.sort(function (a, b) {
return !($(a).find(".nom").text() > $(b).find(".nom").text());
});
$("#index").html(alphabeticallyOrderedDivs);
});
/* ANNEE */
$('#annee_ASC').on('click', function () {
var numericallyOrderedDivs = $divs.sort(function (a, b) {
return $(a).find(".annee").text() > $(b).find(".annee").text();
});
$("#index").html(numericallyOrderedDivs);
});
$('#annee_DSC').on('click', function () {
var numericallyOrderedDivs = $divs.sort(function (a, b) {
return !($(a).find(".annee").text() > $(b).find(".annee").text());
});
$("#index").html(numericallyOrderedDivs);
});
/* STATUT */
$('#statut_ASC').on('click', function () {
var numericallyOrderedDivs = $divs.sort(function (a, b) {
return $(a).find(".statut").text() > $(b).find(".statut").text();
});
$("#index").html(numericallyOrderedDivs);
});
$('#statut_DSC').on('click', function () {
var numericallyOrderedDivs = $divs.sort(function (a, b) {
return !($(a).find(".statut").text() > $(b).find(".statut").text());
});
$("#index").html(numericallyOrderedDivs);
});
/* TYPE */
$('#type_ASC').on('click', function () {
var numericallyOrderedDivs = $divs.sort(function (a, b) {
return $(a).find(".type").text() > $(b).find(".type").text();
});
$("#index").html(numericallyOrderedDivs);
});
$('#type_DSC').on('click', function () {
var numericallyOrderedDivs = $divs.sort(function (a, b) {
return !($(a).find(".type").text() > $(b).find(".type").text());
});
$("#index").html(numericallyOrderedDivs);
});
and the Jquery for the div open (slideToggle)
$('.ligne').click(function () {
$(this).siblings().children(".content").slideUp(500);
$(this).children(".content").slideToggle(500)
});
here is a jsfiddle to see it in action : http://jsfiddle.net/C2heg/726/
thanks,
