javascript - スポイラーの仕上げ方

Question

コードhttp://jsfiddle.net/VWCnd/5/があります。インジケーターの追加方法 ↓ ↑. サンプル画像http://i.stack.imgur.com/OxpaP.png

J:

$(document).ready(function(){
 $('.spoiler_title').click(function(){
  $(this).parent().children('div.spoiler_toggle').toggle();
  return false;
 });
});

html:

<div>
    <a href="" class="spoiler_title">Title</a>     
    <div class="spoiler_toggle">
        <div class="spoiler_bg">Body</div>
    </div>
</div>

CSS:

.spoiler_title {
    display:block;
    background-color: #551A8B;
    color: #fff;
    padding: 10px 10px;
}
.spoiler_toggle {
    display:none;
}
.spoiler_bg {
    background: #9C6AC9;
    padding: 5px 5px;
}

ありがとう。

Answer 1

あなたはいつでも次のようなことをすることができます：

http://jsfiddle.net/VWCnd/7/

 $('.spoiler_title').click(function(){
     var $this = $(this),
         visible  = $this.parent().children('div.spoiler_toggle').toggle().is(':visible');
     $this.find('.spoiler_indicator').html(visible? '↑' : '↓');
     return false;
 });

Answer 2

デモはこちら

コード -

JS:

$(document).ready(function(){
 $('.spoiler_title').click(function(){
     $(this).find(".sp_but").text(($(this).find(".sp_but").text() == '↓' ? '↑' : '↓'))
  $(this).parent().children('div.spoiler_toggle').toggle();
  return false;
 });
});

HTML:

<div>
    <a href="" class="spoiler_title">Title <span class="sp_but">↓&lt;/span></a> 

<div class="spoiler_toggle">
    <div class="spoiler_bg">Body</div>
</div>

</div>

CSS:

.spoiler_title {
    display:block;
    background-color: #551A8B;
    color: #fff;
    padding: 10px 10px;
}
.spoiler_toggle {
    display:none;
}
.sp_but{
    float: left;
    margin-right:20px;
}
.spoiler_bg {
    background: #9C6AC9;
    padding: 5px 5px;
}