In this particular example, I have created a list with a click handler. The behavior is such that when an element in the list is clicked, the ".selected" class is added to it, which changes its height. Subsequently, if another list element is clicked, the ".selected" class is removed from the previously clicked element (thus restoring it to its original height) and added to the newly clicked element, altering its height.
Upon observing the demonstration in another version, an interesting behavior is noticed. When a lower list element is clicked, the clicked element remains stationary while expanding, and the previous selection contracts. However, clicking on an upper list element results in the list scrolling up to accommodate the contracting element, causing slight movement in the newly selected element. It would be ideal to implement a solution that prevents this scroll behavior, ensuring a seamless experience where the ".selected" list element remains still even in this scenario.
HTML:
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
JavaScript:
$(document).ready(function () {
$("li").click(function () {
$(".selected").removeClass("selected");
$(this).addClass("selected");
});
});
CSS:
li{
width:100%;
border-top:solid black 1px;
height:100px;
background:green;
}
.selected{
height:300px;
background:red;
}