2017年10月9日(月)
折り畳み本文付きタイトル #HTML5&CSS3&JavaScript
折り畳み本文付きタイトル #HTML5&CSS3&JavaScript
タイトルをクリックすると、本文が表示されるプログラミング。
--
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<style>
h3 {cursor:pointer;}
</style>
<script>
function _folding($target){
$target = $target.nextSibling;
if($target.style.display=="none"){
$target.style.display = "block";
}else{
$target.style.display = "none";
}
}
</script>
<title>折り畳み本文付きタイトル</title>
</head>
<body>
<h2>【折り畳み本文付きタイトル】</h2>
<hr>
<h3 onclick="_folding(this);">タイトル１</h3><p> 本文１</p>
<hr>
<h3 onclick="_folding(this);">タイトル２</h3><p style="display:none;"> 本文２</p>
<hr><hr>
</body>
</html>
--
DOM [Document Object Model]を理解できれば、簡単でしょ。thisは今のノード（塊）、.nextSiblingは、次（右隣り）のノードという意味。
注意点としては、</h3>と<p>の間に何も入れないこと。半角スペースや改行もダメ。それらはタグで囲まれていないけど、ノードと見なされるので、指定が狂います。
-- × --
<h3 onclick="_folding(this);">タイトル１</h3>[改行]
<p> 本文１</p>
--
http://neconote.jp/prg/folding.html
--
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<style>
h3 {cursor:pointer;}
</style>
<script>
function _folding($target){
$target = $target.nextSibling;
if($target.style.display=="none"){
$target.style.display = "block";
}else{
$target.style.display = "none";
}
}
</script>
<title>折り畳み本文付きタイトル</title>
</head>
<body>
<h2>【折り畳み本文付きタイトル】</h2>
<hr>
<h3 onclick="_folding(this);">タイトル１</h3><p> 本文１</p>
<hr>
<h3 onclick="_folding(this);">タイトル２</h3><p style="display:none;"> 本文２</p>
<hr><hr>
</body>
</html>
--
DOM [Document Object Model]を理解できれば、簡単でしょ。thisは今のノード（塊）、.nextSiblingは、次（右隣り）のノードという意味。
注意点としては、</h3>と<p>の間に何も入れないこと。半角スペースや改行もダメ。それらはタグで囲まれていないけど、ノードと見なされるので、指定が狂います。
-- × --
<h3 onclick="_folding(this);">タイトル１</h3>[改行]
<p> 本文１</p>
--
http://neconote.jp/prg/folding.html
お問い合わせby Network Communication Note