学習サイトを自分で利用する際に、複数のテキストを表示/非表示に切替えたかったので、その設置方法のまとめです。

jQueryの利用

現在制作しているサイトで、テキストの表示・非表示の切替えを行なおうと考えました。

方法はいくつか考えられますが、jQueryを利用したものが一番使いやすそうでしたので、jquery クリックで内容の表示・非表示の切り替え(ボタンのテキストも入れ替え)|JUMP-UP.INFOこちらの記事を参考に設置しました。


やってみた

サンプル

jQuery


$(document).ready(function(){
    $(".codecontent1").hide();
    var pon1 = "close";
    $(".codecontent2").hide();
    var pon2 = "close";
    $(".codecontent3").hide();
    var pon3 = "close";
    $(".codecontent4").hide();
     //設置分
    $(".codebtn1").click(function(){
        $(this).next(".codecontent1").slideToggle();
        if(pon1 == "close"){
            $(this).text("閉じる");
            pon1 = "open";
        }else{
            $(this).text("1 解説を表示");
            pon1 = "close";
        }
    });
    $(".codebtn2").click(function(){
        $(this).next(".codecontent2").slideToggle();
        if(pon2 == "close"){
            $(this).text("閉じる");
            pon2 = "open";
        }else{
            $(this).text("2 解説を表示");
            pon2 = "close";
        }
    });
    $(".codebtn3").click(function(){
        $(this).next(".codecontent3").slideToggle();
        if(pon3 == "close"){
            $(this).text("閉じる");
            pon3 = "open";
        }else{
            $(this).text("3 解説を表示");
            pon3 = "close";
        }
    });
   //設置分
});


「変数pon」(今回はponで設定しています)に対して、クリックされる事によりアクションを起こさせます。

初期状態ではテキストを非表示(「.hide」という指示)にしています。

クリックをされるとボタンの後に、テキストを表示(「.slideToggle」という指示です)させます。

また、ボタンの文字を「解説を表示」から「閉じる」という文字に変更させる指示(「.text」)を同時に行ないます。


HTML


<!DOCUTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
    </head>
<body>
<p><p class="c-btn codebtn1">1 解説を表示</p>
<div class="c-ctt codecontent1">
1 ここに表示/非表示される内容を記載
</div>
<p><p class="c-btn codebtn2">2 解説を表示</p>
<div class="c-ctt codecontent2">
2 ここに表示/非表示される内容を記載
</div>
<p><p class="c-btn codebtn3">3 解説を表示</p>
<div class="c-ctt codecontent3">
3 ここに表示/非表示される内容を記載
</div>
<p></body>
</html>


CSS


* {
  margin: 0;
  padding: 0;
  border: 0;
}
body {
  background: #fcfcea;
  font: 16px sans-serif;
}
.c-btn {
       width: 100px;
       text-align: center;
       margin: 20px;
       padding: 10px;
       font-weight: bold;
       cursor: pointer;
       color:  #fcfcea;
       border-radius: 3px;
       -webkit-border-radius: 3px;
       background-color: #e8672a;
       box-shadow: 0 0 1px 0 rgba(0,0,0,.05);
}
.c-btn:hover{
       background-color: #270001;
}
.c-ctt{
	background-color: #ddd;
	box-shadow: 0 0 1px 0 rgba(0,0,0,.05);
    margin: 20px;
	padding: 10px;
}

HTMLとCSSは上記サイトを参照にしてボタンを設置してみました。


まとめ

参考にさせて頂いた記事のおかげで、なんとか自分の設置したかった表示が出来る様になりました。jQueryやっぱり便利ですね。

「HTML5まなぶくん」に設置してみました。(肝心の解説はこれからまとめます)

ただ…jQueryは別に認定試験には出題されないんだよなあ…。まあいいか。