Hiding and showing div with fadeIn and fadeOut not working

Question

I am trying to hide or show a div based on the following code

$("#click").click(function(){
var x = $("#left-column").css('display');
console.log(x);
if(x=='block'){
   $("#left-column").fadeOut();
}else{
   $("#left-column").fadeIn();
}

});

The html file is the following:

  <!DOCTYPE html>
    <html lang="en">

    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="../css/main.css">
    <link rel="stylesheet" 

 href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Montserrat" 

    rel="stylesheet">
        <link rel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    </head>

<body>
    <div id="wrapper">
        <div id="left-column" class="col-3">
        </div>
        <div id="test">
            <button class="btn btn-danger" id="click">

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

    <script src="https://code.jquery.com/jquery-3.4.1.js"
        integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
    <script type="text/javascript" src="js/filename.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>
</body>

The css file is the following:

#left-column{
position:relative;
height:100vh;
background-image: linear-gradient(to top, #727bf5, #282828);
/* max-width:300px;
min-width:200px; */
float:left;

}
#test{
  float:left;
}
#wrapper{
 overflow: hidden;

 }

but I am having the following error

filename.js:6 Uncaught (in promise) TypeError: $(...).fadeOut is not a functionat HTMLButtonElement.document.getElementById.onclick

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

You are using jQuery, so use jQuery:

$("#click").click(function(){
   var x = $("#left-column").css('display');
   console.log(x);
   if(x=='block'){
      $("#left-column").fadeOut();
   }else{
      $("#left-column").fadeIn();
   }
});

Note that you do not need to return the instruction to hide the div, just hide it.

You also want to test the value of x, not that there IS a value in x.

$("#click").click(function(){
   var x = $("#left-column").css('display');
   console.log(x);
   if(x=='block'){
      $("#left-column").fadeOut();
   }else{
      $("#left-column").fadeIn();
   }
});

#wrapper{display:flex;}
#wrapper>div {flex:1;}

#left-column{background:blue;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

 <div id="wrapper">
    <div id="left-column" class="col-3">Stuff</div>
    <div id="test">
        <button class="btn btn-danger" id="click">Button</button>
    </div>
</div>

Update:

After updating your question with the additional code, I see a few more issues:

You are including multiple versions of jQuery.

    <script src="https://code.jquery.com/jquery-3.4.1.js"
        integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
    <script type="text/javascript" src="js/filename.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>

Don't do this - they will conflict. Reduce to only one:

    <script src="https://code.jquery.com/jquery-3.4.1.js"
        integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
    <script type="text/javascript" src="js/filename.js"></script>

Also, is the complete contents of your javascript file src="js/filename.js" posted in the question? If so, then you need to wrap your js code in a document.ready wrapper:

$(document).ready(function(){
    $("#click").click(function(){
       var x = $("#left-column").css('display');
       console.log(x);
       if(x=='block'){
          $("#left-column").fadeOut();
       }else{
          $("#left-column").fadeIn();
       }
    });
});

The reason that you need that is because it delays jQuery from binding to the DOM elements until they actually exist in the DOM.

Without the document.ready wrapper, javascript will try to bind the click event to the #click button, but that button might not yet exist in the DOM and it won't work. As a rule of thumb, ALWAYS begin your js code with the document.ready wrapper. Because this is a basic point, we often do not include that bit of information in our answers - even StackSnippet examples do not need the document.ready wrapper -- but your real code does.

follogwed the same steps but got the following . filename.js:6 Uncaught TypeError: $(...).fadeOut is not a function at HTMLButtonElement. (plans.js:6) at HTMLButtonElement.dispatch (jquery-3.4.1.js:5237) at HTMLButtonElement.elemData.handle (jquery-3.4.1.js:5044) — Ahmed, Jul 25 '19 at 16:26
thanks for the answer and the help i did what you said but there error still persists it works only when i replace fadeOut() and fadeIn() with toggle() — Ahmed, Jul 25 '19 at 20:05
In that case, try using `.toggleClass` (which adds/removes a class from the element), and then create a class that animates the opacity - like in [this example](https://stackoverflow.com/questions/30855985/pure-css-animation-visibility-with-delay) or [this one](https://stackoverflow.com/questions/7350178/jquery-css-visibility-with-animation) or [this](https://stackoverflow.com/questions/9320673/can-we-animate-visibility). *NOTE that you must animate the opacity (or even visibility) because `display` is all-or-none / on-or-off -- but `opacity` can be animated.* — cssyphus, Jul 25 '19 at 21:10

score 0 · Answer 2 · answered Jul 25 '19 at 16:24

0

Instead of using

document.getElementById("click").onclick= async()=>{

You can use

$(document).on("click", "#click",function(){

if you want the function to work even on elements that will be created on the page on the future.

answered Jul 25 '19 at 16:24

dgtal

193
16

score 0 · Answer 3 · answered Jul 25 '19 at 18:02

0

Use the fadeToggle function.

$(document).ready(function(){
  $("#click").click(function(){
    $("#left-column").fadeToggle();
  });
});

answered Jul 25 '19 at 18:02

an_owl

69
10

does-not work the only function thats works is toggle() but I want to used fadeOut() and fadeIn() to animate it the result – Ahmed Jul 25 '19 at 18:06
There may be a conflict with the libraries. Both 3.3 slim and 3.4 are called. Here is a js fiddle for [fadetoggle](https://jsfiddle.net/2kdvjmuc/1/) and [animate](https://jsfiddle.net/935syzou/) – an_owl Jul 25 '19 at 19:27
i used one library but there is still a problem – Ahmed Jul 25 '19 at 19:39

Hiding and showing div with fadeIn and fadeOut not working

3 Answers3

Update: