ガレコレ [Garage Collection]
2017年10月9日(月)
折り畳み本文付きタイトル 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);">タイトル1</h3><p> 本文1</p>

<hr>

<h3 onclick="_folding(this);">タイトル2</h3><p style="display:none;"> 本文2</p>

<hr><hr>

</body>

</html>
--

 DOM [Document Object Model]を理解できれば、簡単でしょ。thisは今のノード(塊)、.nextSiblingは、次(右隣り)のノードという意味。

 注意点としては、</h3>と<p>の間に何も入れないこと。半角スペースや改行もダメ。それらはタグで囲まれていないけど、ノードと見なされるので、指定が狂います。

-- × --
<h3 onclick="_folding(this);">タイトル1</h3>[改行]
<p> 本文1</p>
--
 
お問い合わせ


by Network Communication Note