How to make a div on second click to close?

Question

I have like 3 blocks and they work perfectly on PC Version, they close and open on click but I have a problem with the mobile version, when i click on one of them it opens but it doesn't close, it closes just if i click on the other block. And if I click again on the same block that is already opened, it just re-opens it. I can't close it, I don't know why. Any help, please!!

<div class="section stats tint">
                <div class="container w-container">
                    <div class="hero-overlay-row w-row">
                            <div class="stats-column w-col w-col-4">
                                <a class="hero-overlay-block-1 w-inline-block" href="#">
                                    <div class="hero-overlay-number">У</div>
                                    <div class="hero-overlay-block-title">УЗО</div>
                                    <p class="link-block-paragraph">Ги брани и прикажува ставовите на учениците.</p>
                                </a>
                            </div>
                        <div class="block-uzo">
                            <h3>УЗО</h3>
                            <p>
                                Училишната Заедница на СУГС Орце Николов претставува легитимно тело составено од претседателите на сите класови,
                                со свое посебно претседателство и организација, основано со цел да ги брани и прикажува ставовите на учениците,
                                да воспоставува легитимна врска помеѓу учениците и училишните служби. Да организира настани, и покренува иницијативи
                                за подобрување на образованието.
                            </p>
                        </div>
                        <div class="stats-column w-col w-col-4">
                        <a class="hero-overlay-block-2 w-inline-block" href="#">
                        <div class="hero-overlay-number">М</div>
                        <div class="hero-overlay-block-title">Мисија</div>
                            <p class="link-block-paragraph">Комуникација и соработка со училишните служби.</p>
                        </a>
                        </div>
                        <div class="block-misija">
                            <h3>Мисија</h3>
                            <p>
                                УЗО  ги застапува потребите и интересите на учениците, преку комуникација и соработка со училишните служби и истовремено
                                поттикнува и придонесува личен развој, преку вклучување на учениците во училишни и вонучилишни активности.
                            </p>
                        </div>
                        <div class="last stats-column w-col w-col-4">
                        <a class="hero-overlay-block-3 w-inline-block" href="#">
                        <div class="hero-overlay-number">В</div>
                        <div class="hero-overlay-block-title">Визија</div>
                            <p class="link-block-paragraph">Подобрување на образованието.</p>
                            </a></div>

                        <div class="block-vizija">
                            <h3>Визија</h3>
                            <p>
                                УЗО е самостојо рамноправно и легитимно тело составено од активни, мотивирани и амбициозни ученици, кое на демократски
                                начин е вклучено во носењето одлуки во соработка со училишните служби.
                            </p>
                        </div></div></div></div>

$(document).ready(function () {
    $(window).on("resize", function (e) {
        checkScreenSize();
    });

    checkScreenSize();

    function checkScreenSize() {
        var newWindowWidth = $(window).width();
        if (newWindowWidth < 768) {
            $(document).ready(function () {
                $('.hero-overlay-block-1').click(function () {
                    $('.block-uzo').slideToggle("slow");
                    $('block-uzo').css('display', 'block');;
                    $('.block-more-1').hide();
                    $('.block-misija').hide();
                    $('.block-vizija').hide();
                });
            });
            $(document).ready(function () {
                $('.hero-overlay-block-2').click(function () {
                    $('.block-misija').toggle("slow");
                    $('.block-misija').css('display', 'block');;
                    $('.block-more-2').hide();
                    $('.block-uzo').hide();
                    $('.block-vizija').hide();
                });
            });
            $(document).ready(function () {
                $('.hero-overlay-block-3').click(function () {
                    $('.block-vizija').toggle("slow");
                    $('block-vizija').css('display', 'block');;
                    $('.block-more-3').hide();
                    $('.block-uzo').hide();
                    $('.block-misija').hide();
                });
            });
        }
    }
});

Answer 1

I don't speak russian but I will try my best..

It seems that you are registering too much click handlers and getting an unexpected behaviour.

On $(window).on("resize", function (e) { checkScreenSize(); } you're calling your checkScreenSize function everytime you resize your window, and inside this function you are registering a click handler for every hero element again, and again, and again if your resolution is lower than 768 (this is why you're having problems only on mobile).

What I think you're looking for is something like this:

$(document).ready(function() { $('.hero-overlay-block-1').click(function() { if ($(window).width() < 768) { $('.block-uzo').slideToggle("slow"); $('block-uzo').css('display', 'block'); $('.block-more-1').hide(); $('.block-misija').hide(); $('.block-vizija').hide(); } }); $('.hero-overlay-block-2').click(function() { if ($(window).width() < 768) { $('.block-misija').toggle("slow"); $('.block-misija').css('display', 'block'); $('.block-more-2').hide(); $('.block-uzo').hide(); $('.block-vizija').hide(); } }); $('.hero-overlay-block-3').click(function() { if ($(window).width() < 768) { $('.block-vizija').toggle("slow"); $('block-vizija').css('display', 'block'); $('.block-more-3').hide(); $('.block-uzo').hide(); $('.block-misija').hide(); } }); });

This way you register a click handler once for each hero element. The screen resolution is checked only when the click events are triggered.

Sorry if I didn't understand the problem properly, I hope it helps.