Hi there! I recently started exploring Js and jQuery, and I was able to create a cool width change animation on a div when hovering over another. However, I ran into an issue when trying to implement this with multiple sets of similar divs. Whenever I hover over one div, the action triggers on all the others as well. I've tried using "this" and "next()" but it only made things worse. Can someone please shed some light on this for me? Thank you!
Here is my code snippet:
https://jsfiddle.net/HiD3f/LmbaL1qo/2/
<html>
<div class="mapHideBtn collapsed"></div>
<div class="searchBlock hidden"></div>
<div class="mapHideBtn collapsed"></div>
<div class="searchBlock hidden"></div>
<div class="mapHideBtn collapsed"></div>
<div class="searchBlock hidden"></div>
</html>
<style>
.searchBlock {
display : inline-block;
height: 50px;
background : red;
}
.hidden {
width: 0;
transition : width 0.4s ease-in
}
.shown {
width: 300px;
transition : width 0.4s ease-in
}
.mapHideBtn {
display : inline-block;
width: 50px;
height: 50px;
background : green;
}
</style>
<script>
$('.mapHideBtn').hover(function(){
if($(this).hasClass("collapsed")) {
$('.searchBlock').removeClass("hidden").addClass("shown");
$('.mapHideBtn').removeClass("collapsed").addClass("expanded");
}
else {
$('.searchBlock').removeClass("shown").addClass("hidden");
$('.mapHideBtn').removeClass("expanded").addClass("collapsed");
};
});