jQuery activate .click() only when clicking specified element

Question

I am attempting to create a cookie notification that will use .slideToggle (or slideUp/Down) to hide the element once a user has clicked "agree" (or cancel, once I add it).

Currently, the element will slideToggle when you click anywhere on the page, not just when clicking the "agree" button like I am trying to do.

I am doing this on a Wordpress.org site (I am unsure if that can affect it), and I am only just learning JavaScript/jQuery so I apologize if i am misunderstanding how .click or .slideToggle works.

The code is as follows:

<style>
.test{
    display:inline-block;
    background-color:#000;
    color:#FFF;
    text-align:center;
    width:100%;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="cdn.jsdelivr.net/jquery.cookie/1.4.1/jquery.cookie.min.js"></script>

<script type="text/javascript">
    var agree=function(){getElementById("#agree")};
    $(agree).click(function(){
        $("#box").slideToggle();
    });
</script>

<div class="test" id="box">
    <p>We Use Cookies</p>
    <button id="agree" type="button">Agree</button>
</div>

Answer 1

This agree function never returns anything. var agree=function(){getElementById("#agree")}; Additionally, you never call the function (only pass a reference to the function). Lastly, you should put your jquery inside the document ready event so your entire page has loaded before the script runs.

Try this javascript:

$(function() {
    $("#agree").click(function(){
        $("#box").slideToggle();
    });
});

Answer 2

The issue is that you attempt to wire up your event before the element exists:

<script type="text/javascript">
    $("#agree").click(function(){
        $("#box").slideToggle();
    });
</script>

<div class="test" id="box">
    <p>We Use Cookies</p>
    <button id="agree" type="button">Agree</button>
</div>

You can't add an event to an element that doesn't exist yet.

You can fix this a number of ways:

1 Add code after the element exists:

<div class="test" id="box">
    <p>We Use Cookies</p>
    <button id="agree" type="button">Agree</button>
</div>

<script type="text/javascript">
    $("#agree").click(function(){
        $("#box").slideToggle();
    });
</script>

2 Use document ready:

<script type="text/javascript">
    $(function() { 
        $("#agree").click(function(){
            $("#box").slideToggle();
        });
    });
</script>

<div class="test" id="box">
    <p>We Use Cookies</p>
    <button id="agree" type="button">Agree</button>
</div>

3 Use event delegation:

<script type="text/javascript">
    $(document).on("click", "#agree", function(){
        $("#box").slideToggle();
    });
</script>

<div class="test" id="box">
    <p>We Use Cookies</p>
    <button id="agree" type="button">Agree</button>
</div>

---

the element will slideToggle when you click anywhere on the page

what's happening is that after var agree=function(){getElementById("#agree")}; then agree == null so you're doing $(null).click(... which then applies to the whole page. If you changed this to $("#agree").click(... then you'd have the issue described above (which is why you couldn't get it to work this way)