Hey there, I'm looking for a way to expand the width of a clicked div while making the other div disappear from the screen simultaneously. It should also be toggleable, so clicking the button again will shrink the div and bring back the other one. For a better visual explanation, you can check out my CodePen demo here
const viewButtons = document.querySelectorAll(".view-now");
const clickHandler = event => {
//add "expand" class to div that was clicked
const propertyDiv = event.target.closest(".property");
propertyDiv.classList.toggle("expand");
//if class name = 'property' then display none. this gets rid of the other div on the screen
const allProps = document.querySelectorAll(".property");
for (i = 0; i < allProps.length; i++) {
if (allProps[i].className == 'property') {
allProps[i].style.display = "none";
}
}
};
viewButtons.forEach(item => {
item.addEventListener("click", clickHandler);
});