HTMLテーブル行に複数のスパンを隠す

Question

テーブル行に<span>を隠すのに問題があります。私はブートストラップのバッジコール "ExpandDetail"をクリックして機能をクリックし、それから自分自身を隠して、同じ<tr>に "CollapseDetail"という別の<span>を表示します。 <span>は両方ともブートストラップ「バッジ」クラスを使用することに注意してください。呼び出し要素は、それ自体を隠すことができますが、それを隠すために、<tr>に関連するスパンを見つけることができません。別々の機能のための

<tr> 
    <td>12345 
     <span id="ExpandDetail" style="cursor: pointer;" class="badge" onclick="return openDetail(this, ‘1’);">ABC 123</span> 
     <span id="CollapseDetail" style="cursor: pointer; visibility: hidden" class="badge" onclick="return closeDetail(this, ‘1’);">ABC 123 </span> 
    </td> 
    <td>$100.00</td> 
    <td>$200.00</td> 
</tr> 

function openDetail(t, ID) { 
    // Hides the calling <span> ExpandDetail just fine 
    $(t).hide(); 
    // Need to show the <span> named CollapseDetail 
} 

function closeDetail(t, ID){ 
    // Hides the calling <span> closeDetail just fine 
    $(t).hide(); 

    // Need to show the <span> named ExpandDetail 

}

Answer 1

必要がありません：ここではデモです。ただ、兄弟スパンに

function toggleDetail(t, ID){ 

    $(t).hide().siblings('.badge').show(); 

    // or use `toggle()` on both 

    $(t).parent().find('.badge').toggle(); 
} 

CSS visibilityが非表示にすることによって制御されていないことに注意してください（）またはshow（）