HTML 折りたたみメニューのメニューの矢印を変化させたい

Question

お世話になります。

HTMLにて折りたたみメニューを作成し、クリックすると新しくテキストが表示されるものを作成しました。

<h4><a href=""onclick="oritatami('o1');return false">メニュー１▶</a></h4>
            <div id="o1" style="display:none">
            <ul>
                <li> メニュー１−１</li>
            </ul>
            </div>

"oritatami"は予め作成したjavascriptを使用しています。

今回おしえていただきたいのは、メニュー１の横にある"▶"がクリックされ、メニュー１−１が表示されたときには矢印の向きを下向きに変化させたいと思っています。

よろしくお願いいたします。

Answer 1

googleで検索するといろいろありますよ。
折りたたみメニュー+矢印

Comments

[satoshi501]

ありがとうございます

Answer 2

全ブラウザに対応するにはjavascriptが必要ですが、ある程度新しいものだけでよいなら
:checkedセレクタで判断してもよいかもしれません

input.oritatami {display:none;}
input.oritatami + h4>label:after{content:"→";}
input.oritatami + h4 + div {display:none;}
input.oritatami:checked + h4>label:after{content:"↓";}
input.oritatami:checked + h4 + div {display:block;}

<input type="checkbox" id="c1" class="oritatami">
<h4><label for="c1">メニュー１</label></h4>
<div>
<ul>
<li> メニュー１-１</li>
<li> メニュー１-２</li>
<li> メニュー１-３</li>
</ul>
</div>
<input type="checkbox" id="c2" class="oritatami" checked>
<h4><label for="c2">メニュー２</label></h4>
<div>
<ul>
<li> メニュー２-１</li>
<li> メニュー２-２</li>
<li> メニュー２-３</li>
</ul>
</div>
<input type="checkbox" id="c3" class="oritatami">
<h4><label for="c3">メニュー３</label></h4>
<div>
<ul>
<li> メニュー３-１</li>
<li> メニュー３-２</li>
<li> メニュー３-３</li>
</ul>
</div>

追記

:checkedが使えない場合のjQuery補足バージョンです
古いIEはチェックボックスを非表示にすると色々問題あるので表示外に飛ばしてしまいます

input.oritatami {position:absolute;margin-top:-9999px;}
label.open:after{content:"↓";}
label.close:after{content:"→";}
div.open{display:block;}
div.close{display:none;}

/* 別途jquery組み込むこと */
$(function(){
  $('input.oritatami[type=checkbox]').change(function(){
    if($(this).prop('checked')){
      var remove="close";
      var add="open";
    }else{
      var remove="open";
      var add="close";
    }
    $(this).nextAll('h4').first().children('label').addClass(add);
    $(this).nextAll('h4').first().children('label').removeClass(remove);
    $(this).nextAll('div').first().addClass(add);
    $(this).nextAll('div').first().removeClass(remove);
  }).change();
});

<input type="checkbox" id="c1" class="oritatami">
<h4><label for="c1">メニュー１</label></h4>
<div>
<ul>
<li> メニュー１-１</li>
<li> メニュー１-２</li>
<li> メニュー１-３</li>
</ul>
</div>
<input type="checkbox" id="c2" class="oritatami" checked>
<h4><label for="c2">メニュー２</label></h4>
<div>
<ul>
<li> メニュー２-１</li>
<li> メニュー２-２</li>
<li> メニュー２-３</li>
</ul>
</div>
<input type="checkbox" id="c3" class="oritatami">
<h4><label for="c3">メニュー３</label></h4>
<div>
<ul>
<li> メニュー３-１</li>
<li> メニュー３-２</li>
<li> メニュー３-３</li>
</ul>
</div>

Comments

[satoshi501]

ありがとうございます。　無事思い通りの事が実行できました！

Answer 3

ガバガバですが…
onclick属性に

this.innerHTML=this.innerHTML.replace(/▶/,'▼');

を追加とか

Comments

[satoshi501]

ありがとうございます。　ただちょっと展開の仕方が自分にはわかりませんでした