There are two clickable div elements that can switch classes when clicked. If the first one contains "1", it will be given a class of "active". If the second one contains "2", it will have the class "active" while removing the class from the first one.
<div class="active">1</div>
<div class="">2</div>
Following this block:
<div class="carousel-inner">
<div class="carousel-item " data-id="1" data="carousel-item"></div>
<div class="carousel-item " data-id="2" data="carousel-item"></div>
</div>
After all this code, there should be a function that detaches divs without a data-id matching the active div. Upon switching, the detached div should re-attach while the second one gets detached.
<script>
$(document).ready(function(){
var a = $("div:contains('1')"),
b;
if (a.hasClass('active')){
b = $("[data-id!='1'][data='carousel-item']").detach();
}
else{
$(".carousel-inner").prepend(b);
}
});
</script>
However, the functionality is not working as expected. When the switch occurs and the class moves from one div to another, only the first div is detached but not reattached upon switching. Any ideas on why this might be happening? Thank you for any assistance!
PS: 1. Due to certain limitations (thanks, mobirise!), I'm unable to manipulate the divs with the active class further (e.g., adding an onclick() attribute or new class). 2. Apologies for any language errors in my explanation.