I'm currently facing an issue with displaying and hiding notification elements based on user interaction. My goal is to have multiple popup elements appear when the page loads. Then, when a user clicks the ".alert-close" element within one of the popups, it should shrink and hide its content, leaving only the ".alert-open" element visible. Clicking the ".alert-open" element should expand it back to its original size and display the content again. This behavior is functional for each individual popup. However, I encounter a challenge when trying to handle clicks on one minimized element while another one is already closed. How can I solve this issue? I've tried using e.preventDefault() and e.stopPropagation() at the end of each query without success. I need a solution that allows me to capture clicks on any number of similar events.
In addition, there's the ".alert-kill" block which works on the second element even if the first one is minimized.
Another question arises: Is there a way to automate this process without duplicating the JavaScript code for each element with a different ID? While my test code below includes duplicate IDs for testing purposes, I recognize that writing separate JS logic for each ID is not efficient. The challenge lies in identifying the click event for individual elements with the same classes so that changes are applied correctly. By removing the IDs and focusing solely on classes, the revised code looks like follows:
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<div class="alert-container">
<div class="alert-popup">
<a class="alert-kill" href="#"><i class="fa fa-times-circle" aria-hidden="true"></i></a>
<div class="pull-left close-alert">
<a class="alert-close" href="#" title="click to shrink"><div class="alert-icon" style="background-image:url('new/images/alert-offer.png');"></div></a>
<a class="alert-open hide" href="#" title="click to expand"><div class="alert-icon" style="background-image:url('new/images/alert-offer.png');"></div></a>
</div>
<div class="row top-10 content-row">
CONTENT 1
</div>
</div>
<div class="alert-popup">
<a class="alert-kill" href="#"><i class="fa fa-times-circle" aria-hidden="true"></i></a>
<div class="pull-left close-alert">
<a class="alert-close" href="#" title="click to shrink"><div class="alert-icon" style="background-image:url('new/images/avatar.jpg');"></div></a>
<a class="alert-open hide" href="#" title="click to expand"><div class="alert-icon" style="background-image:url('new/images/avatar.jpg');"></div></a>
</div>
<div class="row top-10 content-row">
CONTENT 2
</div>
</div>
</div>
<script>
var state = "open" ;
$(".alert-container").on("click", ".alert-popup .alert-close", function(e){
e.preventDefault();
if (state !== "open")
return;
var $container = $(this).closest(".alert-popup");
var $content = $container.find(".content-row");
$container.css({
"right": "-270px",
"height": "40px",
"transition": "all 1s ease 0s"
});
$content.css({
"transform":"scale(.5)",
"transform-origin":"0 0",
"transition": "all 1s ease 0s"
});
state = "close";
$(this).addClass("hide");
$(this).siblings(".alert-open").removeClass("hide");
});
$(".alert-container").on("click", ".alert-popup .alert-open", function(e){
e.preventDefault();
if (state === "open")
return;
var $container = $(this).closest(".alert-popup");
var $content = $container.find(".content-row");
$container.css({
"right": "0px",
"height": "80px",
"transition": "all 1s ease 0s"
});
$content.css({
"transform":"scale(1)",
"transition": "all 1s ease 0s"
});
state = "open";
$(this).addClass("hide");
$(this).siblings(".alert-close").removeClass("hide");
});
$(".alert-container").on("click", ".alert-popup .alert-kill", function(){
$(this).closest(".alert-popup").css("display","none");
});
</script>