My approach involves utilizing the index() function, however, I encountered a challenge where the index changes each time we use prepend() on an li element. To address this issue, I decided to assign an id property to each li automatically in order to maintain a fixed index for them.
$("li").each(function(index){
$(this).prop("id",index);
});
Subsequently, the strategy is to prepend the li elements based on the clicked li, leveraging the assigned id. For instance, clicking on the second li would result in the following sequence:
if($(this).prop("id")==1){//If it's the second one
$("ul").prepend($("#2"));
$("ul").prepend($("#0"));
$("ul").prepend($("#1"));
}
Below is a code snippet illustrating how this theory is put into practice:
$("li").each(function(index){
$(this).prop("id",index);
});
$("li").on("click",function(){
$(".collapsible-body").hide();
$(this).find(".collapsible-body").show("slow");
if( $(this).prop("id") == 0 ){//If it's the first one
$("ul").prepend($("#2"));
$("ul").prepend($("#1"));
$("ul").prepend($("#0"));
}else if($(this).prop("id")==1){//If it's the second one
$("ul").prepend($("#2"));
$("ul").prepend($("#0"));
$("ul").prepend($("#1"));
}else{//If it's the third one
$("ul").prepend($("#1"));
$("ul").prepend($("#0"));
$("ul").prepend($("#2"));
}
});
.collapsible-body{
display:none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="collapsible" data-collapsible="accordion">
<li>
<div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
<div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
</li>
<li>
<div class="collapsible-header"><i class="material-icons">place</i>Second</div>
<div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
</li>
<li>
<div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
<div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
</li>
</ul>
OPTIMIZATION
Alternatively, you can simplify the process with the following implementation:
$("li").each(function(index){
$(this).prop("id",index);
});
$("li").on("click",function(){
$(".collapsible-body").hide();
$(this).find(".collapsible-body").show("slow");
for(var i=0;i<$("li").length;i++){
var id="#"+i;
$("ul").append($(id));
}
$("ul").prepend($(this));
});
.collapsible-body{
display:none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="collapsible" data-collapsible="accordion">
<li>
<div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
<div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
</li>
<li>
<div class="collapsible-header"><i class="material-icons">place</i>Second</div>
<div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
</li>
<li>
<div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
<div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
</li>
</ul>