HOWTO · jQuery
jQuery トグル表示
このチュートリアルでは、jQuery を使用して要素の可視性を切り替える方法を示します。
このページの内容
このチュートリアルでは、jQuery を使用して要素の可視性を切り替える方法を示します。
jQuery トグル表示
jQuery メソッド toggle() を使用して、HTML 要素の可視性を切り替えることができます。 これは、トグル機能を実装するために show() と hide() メソッドの両方を実装します。
このメソッドの構文は次のとおりです。
toggle( speed, [callback])
ご覧のとおり、このメソッドは 2つのパラメーターを取ります。 どちらもオプションです。speed は、slow、normal、または fast の 3つの文字列値を持つトグル アニメーションの速度、またはミリ秒単位の任意の整数値です。callback は、次のことができる関数です。 アニメーションが完了すると呼び出されます。
両方のオプション パラメータを使用して簡単な例を試してみましょう。
<!doctype html>
<html lang="en">
<head>
<title>jQuery toggle() method</title>
<script src = "https://code.jquery.com/jquery-3.6.0.js"></script>
<script>
$(document).ready(function() {
$("#toggle").click(function(){
$("#toggleDiv").toggle( 'slow', function(){
$("#Info").text('The visibility toggle is performed');
});
});
});
</script>
<style>
#toggleDiv {
border: 5px solid green;
background-color : lightblue;
height: 10%;
width: 20%;
}
</style>
</head>
<body>
<button id = "toggle"> Toggle the Element </button>
<div id = "toggleDiv">
<h1>Delftstack</h1>
</div>
<div id = "Info"></div>
</body>
</html>
上記のコードは、ボタンがクリックされるたびに特定の div 要素を切り替え、切り替えが完了すると情報を表示します。
出力を参照してください。
show() および hide() メソッドを使用して、jQuery で要素の可視性を切り替えます
jQuery には、個々の操作を実行するためのメソッド show() および hide() も用意されています。 これらのメソッドを一緒に実装して、jQuery の要素を切り替えることもできます。
これらのメソッドの構文は次のとおりです。
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
speed と callback は toggle() メソッドと同じパラメーターです。 これらのメソッドを使用して簡単なトグルの例を試してみましょう:
<!doctype html>
<html lang="en">
<head>
<title>jQuery toggle with Show Hide methods</title>
<script src = "https://code.jquery.com/jquery-3.6.0.js"></script>
<style>
#Demobox1 {
background: lightgreen;
width: 150px;
height: 150px;
margin-bottom:
10px;
}
#Demobox2 {
background: lightblue;
width: 150px;
height: 150px;
margin-bottom:
10px;
}
#Demobox3{
background: pink;
width: 150px;
height: 150px;
margin-bottom:
10px;
}
</style>
</head>
<body>
<div id="div1">
<div id="Demobox1"><h1>1</h1></div>
<div id="Demobox2"><h1>2</h1></div>
<div id="Demobox3"><h1>3</h1></div>
<button id="Click1">Toggle Box 1 visibility</b>
<button id="Click2">Toggle Box 2 visibility</b>
<button id="Click3">Toggle Box 3 visibility</b>
</div>
<script>
$("#Click1").click(function(){
if ( $("#Demobox1:visible").length ){
$("#Demobox1").hide("slow");
} else {
$("#Demobox1").show("slow");
}
});
$("#Click2").click(function(){
if ( $("#Demobox2:visible").length ){
$("#Demobox2").hide("slow");
} else {
$("#Demobox2").show("slow");
}
});
$("#Click3").click(function(){
if ( $("#Demobox3:visible").length ){
$("#Demobox3").hide("slow");
} else {
$("#Demobox3").show("slow");
}
});
</script>
</body>
</html>
上記のコードは、toggle() メソッドと同様に機能します。 出力を参照してください。
css() メソッドを使用して、jQuery の要素の可視性を切り替えます
jQuery メソッド css() を使用して、要素の可視性を切り替えることもできます。 これを実行するには、div の可視性が非表示の場合は可視に設定し、その逆も同様に設定するように条件を作成する必要があります。
css() メソッドの構文は次のとおりです。
$("#Demobox1").css("visibility","hidden");
$("#Demobox1").css("visibility","visible");
可視性が非表示の場合は、可視に設定します。 それ以外の場合は、表示されている場合は非表示に設定します。
例を試してみましょう：
<!doctype html>
<html lang="en">
<head>
<title>jQuery toggle with Css method</title>
<script src = "https://code.jquery.com/jquery-3.6.0.js"></script>
<style>
#Demobox1 {
background: lightgreen;
width: 150px;
height: 150px;
margin-bottom:
10px;
}
#Demobox2 {
background: lightblue;
width: 150px;
height: 150px;
margin-bottom:
10px;
}
#Demobox3{
background: pink;
width: 150px;
height: 150px;
margin-bottom:
10px;
}
</style>
</head>
<body>
<div id="div1">
<div id="Demobox1"><h1>1</h1></div>
<div id="Demobox2"><h1>2</h1></div>
<div id="Demobox3"><h1>3</h1></div>
<button id="Click1">Toggle Box 1 visibility</b>
<button id="Click2">Toggle Box 2 visibility</b>
<button id="Click3">Toggle Box 3 visibility</b>
</div>
<script>
$("#Click1").click(function(){
if ( $("#Demobox1").css("visibility") == "visible" ){
$("#Demobox1").css("visibility","hidden");
} else {
$("#Demobox1").css("visibility","visible");
}
});
$("#Click2").click(function(){
if ( $("#Demobox2").css("visibility") == "visible" ){
$("#Demobox2").css("visibility","hidden");
} else {
$("#Demobox2").css("visibility","visible");
}
});
$("#Click3").click(function(){
if ( $("#Demobox3").css("visibility") == "visible" ){
$("#Demobox3").css("visibility","hidden");
} else {
$("#Demobox3").css("visibility","visible");
}
});
</script>
</body>
</html>
上記のコードには 3つの異なる div が含まれており、CSS の表示プロパティを設定することにより、異なるボタンを使用して表示を切り替えることができます。
出力を参照してください。
