Close current Pop-up when open another Pop-up on clic

Question

I wanted to ask, if it's possible to write a JavaScript that closes the current pop-up, if another one opens.

I have 5 items, with different pop ups, like seen in the HTML (only 2 items for demo-purposes) - if I don't close the current open item, it remains open. I want the current open item to close, when I open another item.

 $(function() { $(".item-details").click(function(e) { $(this).children(".details-content").fadeIn(1000); return false; }); $(".close-content").click(function() { $(this).parent(".details-content").fadeOut(1000); return false; }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="item-details item-1"> <span class="icon"> <img src="assets/images/icons/icon.svg" alt="icon"> </span> <div class="details-content"> <a class="close-content">&times;</a> <h3>head</h3> <p>some amazing text</p> </div> </div> <div class="item-details item-2"> <span class="icon"> <img src="assets/images/icons/icon.svg" alt="icon"> </span> <div class="details-content"> <a class="close-content">&times;</a> <h3>head</h3> <p>some amazing text</p> </div> </div>

Answer 1

First, you have to assign unique identificators to your items.
Then, you can subscribe your contents to events like this.

Example

 $(function () { $(".item-details").click(function (e) { $(this).children(".details-content").trigger("show-content"); let currentId = $(this).attr('id'); $(".item-details").each(function () { let id = $(this).attr('id'); if (id != currentId) { let content = $(this).children(".details-content").trigger("close-content"); } }); return false; }); $(".close-content").click(function () { $(this).parent(".details-content").trigger("close-content"); return false; }); $(".details-content").on("show-content", function() { $(this).fadeIn(1000) }); $(".details-content").on("close-content", function() { $(this).fadeOut(1000) }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="item-1" class="item-details"> <span class="icon"> <img src="assets/images/icons/icon.svg" alt="icon"> </span> <div class="details-content"> <a class="close-content">&times;</a> <h3>head</h3> <p> some amazing text </p> </div> </div> <div id="item-2" class="item-details"> <span class="icon"> <img src="assets/images/icons/icon.svg" alt="icon"> </span> <div class="details-content"> <a class="close-content">&times;</a> <h3>head</h3> <p> some amazing text </p> </div> </div>

Answer 2

How I would do it:

hide all your pop-ups before you open a new one.

Edit:

if i combine my answer with sina_r's answer, i'd say this will give you the best result:

$(function () {
    $(".item-details").click(function (e) {
        if (!$(this).children(".details-content").is(':visible')){
            $("details-content").hide();
            $(this).children(".details-content").fadeIn(1000);
        }
        return false;
    });

    $(".close-content").click(function () {
        $(this).parent(".details-content").fadeOut(1000);
        return false;
    });
});

I hope this is helpfull for you

Answer 3

There is two things you need to do:

1. Check if the "details-content" of the pop up you click is visible, so that you do not close it in case of a double click on the same pop up .

2. Hide all other "details-content" on click

 $(function () { $(".item-details").click(function (e) { if ($(this).children(".details-content").is(":visible")){ $(this).children(".details-content").fadeIn(1000); }else { $(".details-content").hide(); $(this).children(".details-content").fadeIn(1000); } }); $(".close-content").click(function () { $(this).parent(".details-content").fadeOut(1000); return false; }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="item-details item-1"> <span class="icon"> <img src="assets/images/icons/icon.svg" alt="icon"> </span> <div class="details-content"> <a class="close-content">x</a> <h3>head 1</h3> <p> some amazing text 1 </p> </div> </div> <div class="item-details item-2"> <span class="icon"> <img src="assets/images/icons/icon.svg" alt="icon"> </span> <div class="details-content"> <a class="close-content">x</a> <h3>head 2</h3> <p> some amazing text 2 </p> </div> </div>