「ボタンを押したら付箋が非表示・表示になる仕組みを作る3」の編集履歴（バックアップ）一覧はこちら
追加された行は緑色になります。
削除された行は赤色になります。
前回記事[[付箋のようにクリックORタップしたら透過する仕組みを作る2]]ではクリックしたら非表示になる機能を作っていきました。
今回はボタンを押したら、付箋が非表示になり、再び押したら表示される仕組みを作っていきます。11月14日記事
~
~
イメージ
~
ボタンを押す前
ボタンを押した後
~
~
目次
#contents
~
~
----
~
*toggleメソッドを使っていきます。
toggleメソッドにはjqueryのバージョン毎に挙動が違うので、バージョンをよく確認して使ってください。
~
~
*コード
HTML
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="style.css">
<title>jQueryでタップやクリックしたら消える付箋</title>
</head>
<body>
<div id="wrapper">
<article class="list">
<dl>
<dt class="col1">りんご</dt>
<dd class="col2">apple</dd>
</dl>
<p id="sticky1"></p>
<button class="ans" id="btn01">答え(answer)</button>
</article>
<article class="list">
<dl>
<dt class="col1">卵</dt>
<dd class="col2">egg</dd>
</dl>
<button class="ans" id="btn02">答え(answer)</button>
<p id="sticky2"></p>
</article>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$("#btn01").click(function () {
$("#sticky1").toggle("slow");
});
$("#btn02").click(function () {
$("#sticky2").toggle("slow");
});
</script>
</body>
</html>
CSS
@charset "utf-8";
/* CSS Document */
#wrapper{
margin: 10px auto;
padding: 20px;
border:1px solid #000;
width:480px;
min-height: 400px;
}
#wrapper article.list{
width:480px;
height:180px;
background: #EEE;
margin-bottom:10px;
padding-top: 10px;
}
#wrapper article.list{
position:relative;
}
#wrapper article.list dl dt.col1{
width:220px;
height: 100px;
padding:10px;
background: #FCC;
display:table-cell;
vertical-align:middle;
text-align:center;
}
#wrapper article.list dl dd.col2{
width:220px;
height: 100px;
padding:10px;
background: #CFC;
display:table-cell;
vertical-align:middle;
text-align:center;
}
#wrapper article.list p#sticky1{
position:absolute;
display: block;
width:240px;
height:120px;
background: #FF0;
vertical-align:middle;
text-align:center;
left:240px;
top: 10px;
z-index:1;
}
#wrapper article.list button.ans{
width: 100px;
height: 30px;
}
~
~
*まとめ
toggleメソッドを使って非表示表示を設定していきました。
~
~
以上
前回記事[[付箋のようにクリックORタップしたら透過する仕組みを作る2]]ではクリックしたら非表示になる機能を作っていきました。
今回はボタンを押したら、付箋が非表示になり、再び押したら表示される仕組みを作っていきます。11月14日記事
~
~
イメージ
~
ボタンを押す前や2回押したとき
&image(width=400,sticky001.png)
ボタンを押した後
&image(width=400,sticky002.png)
~
~
目次
#contents
~
~
----
~
*toggleメソッドを使っていきます。
toggleメソッドにはjqueryのバージョン毎に挙動が違うので、バージョンをよく確認して使ってください。
~
~
*コード
HTML
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="style.css">
<title>jQueryでタップやクリックしたら消える付箋</title>
</head>
<body>
<div id="wrapper">
<article class="list">
<dl>
<dt class="col1">りんご</dt>
<dd class="col2">apple</dd>
</dl>
<p id="sticky1"></p>
<button class="ans" id="btn01">答え(answer)</button>
</article>
<article class="list">
<dl>
<dt class="col1">卵</dt>
<dd class="col2">egg</dd>
</dl>
<button class="ans" id="btn02">答え(answer)</button>
<p id="sticky2"></p>
</article>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$("#btn01").click(function () {
$("#sticky1").toggle("slow");
});
$("#btn02").click(function () {
$("#sticky2").toggle("slow");
});
</script>
</body>
</html>
CSS
@charset "utf-8";
/* CSS Document */
#wrapper{
margin: 10px auto;
padding: 20px;
border:1px solid #000;
width:480px;
min-height: 400px;
}
#wrapper article.list{
width:480px;
height:180px;
background: #EEE;
margin-bottom:10px;
padding-top: 10px;
}
#wrapper article.list{
position:relative;
}
#wrapper article.list dl dt.col1{
width:220px;
height: 100px;
padding:10px;
background: #FCC;
display:table-cell;
vertical-align:middle;
text-align:center;
}
#wrapper article.list dl dd.col2{
width:220px;
height: 100px;
padding:10px;
background: #CFC;
display:table-cell;
vertical-align:middle;
text-align:center;
}
#wrapper article.list p#sticky1{
position:absolute;
display: block;
width:240px;
height:120px;
background: #FF0;
vertical-align:middle;
text-align:center;
left:240px;
top: 10px;
z-index:1;
}
#wrapper article.list button.ans{
width: 100px;
height: 30px;
}
~
~
*まとめ
toggleメソッドを使って非表示表示を設定していきました。
~
~
以上
