How to fix the animation?-CodePudding

The blue block collapses and unfolds, and I need it to appear and perform an animation where it slides down It's all about slideToggle(300) - this is the very animation of folding and unfolding. I don't want to change the code too much, what can I do about it?
html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>JS</title>
    <link rel="stylesheet" href="stylet.css">
    <script src="javat.js"></script>
    <script src="jquery-3.6.0.min.js"></script>
</head>
<body>
    <input type="button" \>
    <input type="button" \>
</body>
</html>

css

body {
    background-color: gray;
}

.content_toggles {
    position: absolute;
    z-index: 1;
    width: 100px;
    height: 100px;
    background-color: yellow;
    border: none;
    border-radius: 10px;
    background-image: url("img/builderhall1.png");
    background-size: 100px;
    background-repeat: no-repeat;
}

.content_blocks {
    display: none;
    position: absolute;
    z-index: 2;
    margin-top: 100px;
    width: 100px;
    height: 100px;
    background-color: blue;
    border: none;
    border-radius: 10px;
}

jquery

$(document).ready(function(){
  $('.content_toggles').click(function(){
    $('.content_blocks').slideToggle(300);
      document.getElementById("content_blocks").style.display = "block";
    return false;
  });
});

CodePudding user response：

I'm not really sure what you're asking here - you should clarify by writing what the issue you're facing is, and what the expected result should be. However, I did notice that you're including your JS file before you load the jQuery library. Simply swap the order of these two lines, or else your javascript code won't work. This is because your javascript code uses jQuery, but you are loading your code before you initialize the jQuery library. Change your HTML to look like this:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>JS</title>
    <link rel="stylesheet" href="stylet.css">
    <script src="jquery-3.6.0.min.js"></script>
    <script src="javat.js"></script>
</head>
<body>
    <input type="button" \>
    <input type="button" \>
</body>
</html>

I also noticed you are trying to access the content_blocks element by its ID, but you define it by class. Instead of document.getElementById("content_blocks").style.display = "block"; do

// vanilla JS
document.querySelector(".content_blocks").style.display = "block";

// jQuery
$('.content_blocks').style.display = "block";

Or you can do

<input type="button" id="content_toggles"\>
<input type="button" id="content_blocks"\>

CodePudding user response：

Do you mean something like this?

$(document).ready(function(){
  $('.content_toggles').click(function(){
    $('.content_blocks').slideToggle(300);
      
});
});

body {
    background-color: gray;
}

.content_toggles {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: yellow;
    border: none;
    border-radius: 10px;
    background-image: url("img/builderhall1.png");
    background-size: 100px;
    background-repeat: no-repeat;
}

.content_blocks {
    display: none;
    position: absolute;
    margin-top: 100px;
    width: 100px;
    height: 100px;
    background-color: blue;
    border: none;
    border-radius: 10px;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>JS</title>
    <link rel="stylesheet" href="stylet.css">
    <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
    <script src="javat.js"></script>
    
</head>
<body>
    <input type="button" \>
    <input type="button" \>
</body>
</html>