I have a layout with 9 squares on a page. When clicking on a square, I want a full-width div to appear underneath it, pushing the other squares down.
I've tried following a tutorial to understand the JavaScript behind this functionality, but I'm having trouble getting it to work.
Here is the Codepen link for reference: http://codepen.io/SaraTez/pen/QEmPjX
<ul class="grid-list">
<li class="li">One</li>
<li class="li">Two</li>
<li class="li">Three</li>
<li class="li">Four</li>
<li class="li">Five</li>
<li class="li">Six</li>
<li class="li">Seven</li>
<li class="li">Eight</li>
<li class="li">Nine</li>
<li class="li">Ten</li>
</ul>
JavaScript Code:
$(".grid-list .li").click(function(){
var .li=$(this);
if ($(this).hasClass("active")) {
$(".grid-list .li.cloned-expand").remove();
$(".grid-list .li").removeClass("active");
}
else {
$(".grid-list .li.cloned-expand").remove();
$(".grid-list .li").removeClass("active");
var cloned=.li.clone().addClass("cloned-expand").append("<span class='cloned-expand-close'>X</span>");
.li.addClass("active").after(cloned);
$('html, body').animate({
scrollTop: $(this).offset().top
}, 400);
}
});
$(document).on("click", ".cloned-expand-close", function(){
$(".grid-list .li.cloned-expand").remove();
$(".grid-list .li").removeClass("active");
});
While the squares appear correctly on the page, the click function is not working. I suspect there might be an issue with my JavaScript code or syntax. Any help in fixing this issue would be greatly appreciated. Alternatively, if you know of any examples showcasing the desired functionality, please share them.