CODEWITHSUNDEEP
jqueryhtmlfadeinfadeout
Ahmed
Ahmed

Reputation: 1359

Hiding and showing div with fadeIn and fadeOut not working

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

Upvotes: 0

Views: 2865

Answers (3)

cssyphus
cssyphus

Reputation: 40038

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:

  1. 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.

Upvotes: 1

an_owl
an_owl

Reputation: 69

Use the fadeToggle function.

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

Upvotes: 0

dgtal
dgtal

Reputation: 303

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.

Upvotes: 0

Related Questions