slideUpとslideDownを使って要素を出したり消したりする
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>slideUpDown</title>
<link rel="stylesheet" href="assets/style.css">
<!-- グーグルからライブラリを取得 -->
<script <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<p class="click-here">押</p>
<div class="youso"></div>
<script>
$(function() {
$(".click-here").click(function () {
if ($("div:first").is(":hidden")) {
//1秒かけてスライドダウン・アップ
$("div").slideDown(1000);
} else {
$("div").slideUp(1000);
}
});
});
</script>
</body>
</html>
.click-here{
dsplay: inline-block;
width: 50px;
height: 50px;
background-color: pink;
text-align: center;
line-height: 50px;
border-radius: 30px;
}
.youso {
background:#3d9a44;
margin:3px;
width:80px;
height:40px;
/* 最初は要素を隠しておく */
display: none;
}