jQuery onclickの変更スパンのテキストを変更し、隠しテーブルを表示

Question

私はJSFiddleで述べたようなテーブルを持っています。 私は最初から灰色部分を隠したいと思います。ユーザーが「詳細を表示」をクリックすると、スパンテキストが変更され、グレーの部分が表示されます。逆に、ユーザーが「詳細を表示」を再度クリックすると、スパンテキストが元の形状に戻り、灰色の部分が非表示になります。

私はそれに対処するためにいくつかのjQueryを書こうとしましたが、なぜ動作していないのかわかりません。灰色の部分も表示することはできません...誰もそれについての提案はありますか？ @Dineshの提案に基づいて

$('.view-detail').on('click',function(){ 
    $('#table1 tr.show-history').css({"display":"block"}); 
    $(this).find('.right').text("▼"); 
}); 

Editted： はトグル機能は、それがすべてのクリックでトグルになります...私は変更される可能性がどのようにそのようなことをクリックするために一度働いていましたか？

$('.view-detail').click(function(){ 
    $('.show-history').toggle(function(){ 
     $('#table1 tr.show-history').css({"display":"block"}); 
     $(this).find('.right').html("▼"); 
    }, function(){ 
     $('#table1 tr.show-history').css({"display":"none"}); 
     $(this).find('.right').html("►"); 
     }); 
    }); 

Answer 1

あなたはjqueryのをロードし$(this).find('.right').html("▼");代わり$(this).find('.right').text("▼");の

var flag = false; 
 
$('.view-detail').on('click',function(){ 
 
\t $('#table1 tr.show-history').toggle(); 
 
    if(flag == false){ 
 
    $(this).find('.right').html("▼"); 
 
    flag = true; 
 
    }else{ 
 
    $(this).find('.right').html("►"); 
 
    flag = false; 
 
    } 
 
});

#table1{ 
 
    background-color:white; 
 
    width:500px; 
 
} 
 
.item-history{ 
 
    width:80%; 
 
    margin:0 auto; 
 
    background-color:#ebebeb; 
 
} 
 

 
.show-history{ 
 
    display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="table1"> 
 
<tr class="view-detail"> 
 
    <td> 
 
    <span class="right">&#9658;</span> View Detail 
 
    </td> 
 
</tr> 
 
<tr class="show-history"> 
 
<td> 
 
<div class="item-history"> 
 
<table> 
 
<tr><td>Row 1 History</td></tr> 
 
<tr><td>Row 2 History</td></tr> 
 
<tr><td>Row 3 History</td></tr> 
 
</table> 
 
</div> 
 
</td> 
 
</tr> 
 
<tr> 
 
    <td>Item 1 Description.........................................................................</td> 
 
</tr> 
 
<tr> 
 
<td>Total: 1 Item</td> 
 
</tr> 
 
</table>