2016-04-11 34 views
0

, aşağıdaki kodu var ama alt bilgi birbiriniSpoiler Ben bir satır tıklandığında alt bilgi almak izin veren bir tablo yapmaya çalışıyorum

ayrı görünür yapamaz

#spoiler, #close { 
 
    display: none; 
 
} 
 
#show:target #spoiler { 
 
    display: table-row; 
 
} 
 
#show:target #open { 
 
    display: none; 
 
} 
 
#show:target #close { 
 
    display: block; 
 
}
<div id="show"> 
 
    <table> 
 
    <tr> 
 
     <td> <a href="#show" id="open" class="trigger open">Company 1</a> 
 
      <a href="#hide" id="close" class="trigger close">Company 1</a></td> 
 
    </tr> 
 
    <tr> 
 
     <td id="spoiler" class="spoiler">Company 1 Information</td> 
 
    </tr> 
 
    <tr> 
 
     <td> <a href="#show" id="open" class="trigger open">Company 2</a> 
 
      <a href="#hide" id="close" class="trigger close">Company 2</a>   </td> 
 
    </tr> 
 
    <tr> 
 
     <td id="spoiler" class="spoiler">Company 2 Information</td> 
 
    </tr> 
 
</table> 
 
</div>

+2

ids yalnızca bir kez kullanılabilir, bu yüzden :) –

cevap

0
<!DOCTYPE html> 
<html> 
<head> 
    <script type="text/javascript"> 
    function toggle_visibility(id){ 
     var e = document.getElementById(id); 
     if(e.style.display == 'none') 
      e.style.display = 'block'; 
     else 
      e.style.display = 'none'; 
    } 
    </script> 
</head> 
<div id="show"> 
    <table> 
    <tr> 
     <td> <a href="#" id="openOne" onclick="toggle_visibility('showOne');">Company 1</a> 
    </tr> 
    <tr> 
     <td id="showOne" style="display:none">Company 1 Information</td> 
    </tr> 
    <tr> 
     <td> <a href="#" id="openTwo" onclick="toggle_visibility('showTwo');">Company 2</a> 
    </tr> 
    <tr> 
     <td id="showTwo" style="display:none">Company 2 Information</td> 
    </tr> 
</table> 
</div> 
</html> 

Javascript kullanarak daha kolay ve daha kolay.

0

birden fazla elemanları için aynı kimliği kullanıyor. Kimliklerini birbirinden ayırmalısınız, bu probleminizi çözecektir.

+0

Bana hızlı bir örnek verebilir misiniz? Burada gerçekten kayboldum – Racana

+0

javascript kullanmak için herhangi bir sorun var mı? –

+0

Hayır, JS'yi bilmiyorum ama öğrenmek istiyorum – Racana