「jQuery」slideToggleメソッドで表示非表示を自動判定するサンプル
環境
Google Chrome 105.0.5195.127
Windows 10 Home 64bit
構文
.slideToggle( [duration ] [, complete ] )
要素が表示のとき、スライドしながら非表示にします。
要素が非表示の時、スライドしながら表示します。
使用例
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function(){
$("#btnchk").click(function() {
// 表示のときは、非表示にします
$("#tt").slideToggle();
// 非表示の時、表示します
$("#tt").slideToggle();
});
});
</script>
</head>
<body>
<div id="tt">study skill become smart</div>
<input type="button" value="検証" id="btnchk" />
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function(){
$("#btnchk").click(function() {
// 表示のときは、非表示にします
$("#tt").slideToggle();
// 非表示の時、表示します
$("#tt").slideToggle();
});
});
</script>
</head>
<body>
<div id="tt">study skill become smart</div>
<input type="button" value="検証" id="btnchk" />
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function(){
$("#btnchk").click(function() {
// 表示のときは、非表示にします
$("#tt").slideToggle();
// 非表示の時、表示します
$("#tt").slideToggle();
});
});
</script>
</head>
<body>
<div id="tt">study skill become smart</div>
<input type="button" value="検証" id="btnchk" />
</body>
</html>
実行結果
「検証」ボタンを押すと、、要素が表示のとき非表示にし、要素が非表示のとき表示します。