Div Wont Hide with JQuery Hide Function

Question

I am setting a div to be hidden by default. When the page loads, I am trying to hide it with jQuery.

I am also using bootstrap

I am pretty new to jquery, so i really appreciate your help

Here is the div in the html file

<!--POP-UP-->
<div class="container hidden d-flex justify-content-center align-items-center" id="prod-pop-up" >
    <div class="row pop-up position-fixed">
        <div class="circle position-absolute"></div>
        <div class="col-5 d-flex align-items-end justify-content-end product-img">
            <img class="" src="img/OM Chicharon.png" alt="">
            <div class="variants d-flex flex-column">
                <button class="btn active">80g</button>
                <button class="btn">40g</button>
            </div>
        </div>
        <div class="col-7 d-flex flex-column justify-content-between product-details">
            <div class="up d-flex flex-column align-items-end">
                <a href=""><img id="close-pop-up" src="imgs/pop-up-close.svg" alt=""></a>
                <div class="product-name d-flex flex-column align-items-end">
                    <h4>oyster mushroom</h5>
                    <h1>Chicharon</h1>
                </div>
                <h3 class="price"><span>PHP</span>119.00</h3>
            </div>
            <div class="down d-flex flex-column align-items-end">
                <p class="text-right prod-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras auctor condimentum nunc vel euismod. Nam eget risus tortor. Proin a quam at enim tincidunt blandit ac eget justo.  </p>
                <button class="btn rounded-pill buy-now">BUY NOW</button>
            </div>

        </div>
    </div>
</div>

and heres the js file

$(document).ready(function(){
$("#close-pop-up").click(function(){
    $('#toggle').hide();
});});

Here is what it means. https://stackoverflow.com/questions/22612263/jquery-hide-doesnt-run-on-dynamically-created-elements It is a very common problem for jQuery newbies to be confused why they can't do anything with dynamically created elements. — react_or_angluar, Dec 27 '20 at 07:42

score 1 · Answer 1 · answered Dec 26 '20 at 15:45

$(document).ready(function(){
$("#close-pop-up").click(function(){
    $('#prod-pop-up').hide();
});});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--POP-UP-->
<div class="container hidden d-flex justify-content-center align-items-center" id="prod-pop-up" >
    <div class="row pop-up position-fixed">
        <div class="circle position-absolute"></div>
        <div class="col-5 d-flex align-items-end justify-content-end product-img">
            <img class="" src="img/OM Chicharon.png" alt="No image">
            <div class="variants d-flex flex-column">
                <button class="btn active">80g</button>
                <button class="btn">40g</button>
            </div>
        </div>
        <div class="col-7 d-flex flex-column justify-content-between product-details">
            <div class="up d-flex flex-column align-items-end">
                <a href=""><img id="close-pop-up" src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" alt=""></a>
                <div class="product-name d-flex flex-column align-items-end">
                    <h4>oyster mushroom</h5>
                    <h1>Chicharon</h1>
                </div>
                <h3 class="price"><span>PHP</span>119.00</h3>
            </div>
            <div class="down d-flex flex-column align-items-end">
                <p class="text-right prod-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras auctor condimentum nunc vel euismod. Nam eget risus tortor. Proin a quam at enim tincidunt blandit ac eget justo.  </p>
                <button class="btn rounded-pill buy-now">BUY NOW</button>
            </div>

        </div>
    </div>
</div>

it seems to be working just make sure that your image path is correct,that is image src is actually referring to an image on your machine.

score -1 · Answer 2 · answered Dec 26 '20 at 10:20

-1

Inside the "click" function, you should choose the right element to hide. I think the best decision would be the root-div with id "prod-pop-up".

So maybe try:

$(document).ready(function(){
   $("#close-pop-up").click(function(){
      $('#prod-pop-up').hide();
   });
});

answered Dec 26 '20 at 10:20

Alexander Klement

112
6

sorry i have corrected the code now, i have put the wrong id, – Kylefrancis Atienza Dec 26 '20 at 15:29

score -1 · Accepted Answer · edited Dec 26 '20 at 15:59

-1

I think you should try in this way, may be it will work

$(document).ready(function(){
   $("#close-pop-up").click(function(){
      $('#prod-pop-up').css("display", "none");;
   });
});

use css("display", "block"); for showing content and css("display", "none"); for hiding the content..

edited Dec 26 '20 at 15:59

Dharman

30,962
25
85
135

answered Dec 26 '20 at 15:54

beginner_coder

68
5

score -1 · Answer 4 · edited Dec 27 '20 at 08:33

-1

I have solved my problem. I have removed the d-flex class. I just put the whole div inside a section so that I can still keep the d-flex class because it ruins the layout without it.

edited Dec 27 '20 at 08:33

react_or_angluar

1,568
2
13
20

answered Dec 27 '20 at 07:31

Kylefrancis Atienza

9
1
5

1

I turned your question into a runnable snippet. Can you put the non-working code back in your question so that it is easier for others to understand the original problem? And consider accepting the answer that someone else worked hard to provide for you? – react_or_angluar Dec 27 '20 at 07:54
hello i edited my question, i just edited it to be my original question, – Kylefrancis Atienza Dec 27 '20 at 11:44

Div Wont Hide with JQuery Hide Function

4 Answers4