兄弟CSSセレクタはどのように使用できますか？

Question

$('#0show').hide(); 
    $('#0click').click(function(event) { 
    $('#0show').toggle(); 
    $('#1show').hide(); 
    $('#2show').hide(); 
    });  

    $('#1show').hide(); 
    $('#1click').click(function(event) { 
    $('#1show').toggle(); 
    $('#0show').hide(); 
    $('#2show').hide(); 
    });   

    $('#2show').hide(); 
    $('#2click').click(function(event) { 
    $('#2show').toggle(); 
    $('#0show').hide(); 
    $('#1show').hide(); 
    }); 

私のコードをもっと使いやすくしようとしています。私は兄弟セレクタを使いたいと思います。基本的に私はすべてのショーが同じなので私のdomを変えなければならないので、私はショークラスを作るだけでしょうか？しかし、どのようにこれらのセレクタをCSSで使うのですか？

HTML（私はいくつかのクラスを示唆として使用するために、編集する必要がある）

<a class='clicked' href='#' id='0click'>Reveal Image Uploader</a> 
<div id='0show'> 
    <div class='column first'> 
     <div class='fieldWithUpload' id='upload_id_5' style='margin-top: 10px'> 
      <div class='uploadHolder'> 
       <div id='bgUploaderButton'></div> 
        <span class='uploadProgressbar'></span> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

ここでは、複数のオープン/クローズのセクションのための単純なパターンです。あなたが使用する必要はありませんIDが

<a class='link' href='javascript://'>Reveal Image Uploader</a> 
<div style="display:none" class="details"> ... </div> 

JS：

$('.link').click(function) { 
    $('.details').hide() 
    $(this).next('.details').show() 
}