Показать текст при нажатии ссылки

Question

Здесь у меня есть фрагмент кода, я хочу показать длинный текст только при нажатии ссылки.

<script src="files/jquery.js"></script> 

<center> 

<table border="1" bordercolor="#999999" style="background-color:#00000" cellpadding="0" cellspacing="0" width="750"> 
<tr style="background-color:#00000 height: 50px; width : 250px; font-size: 25px"> 
<td> <center> Product </center> </td> <td> <center> Description </center> </td> <td>  <center> Price </center> </td> 
</tr> 
<tr> 
<td>&nbsp;<a href="#" class="readmore">My product name</a> </td> <td>&nbsp;This is just an introducary description <p class="more">This is a more complex description which should open only when the product name is clicked and here will be also a button to add to cart and some media .</p> <td> <center> <font size="3"> <b> $3 </b> </font> </center> </td> </tr> 
</table> 

</center> 

Так что я не знаю точно, что код, который я должен поставить, чтобы длинный текст скрыт и отображается только тогда, когда моя ссылка название продукта щелкают, может кто-нибудь помочь мне сделать это.

Редактировать: Я хочу, чтобы он хорошо открывался, теперь я вижу, что не знаю, как это объяснить, но я думаю, что должен использовать jQuery, чтобы он был анимирован при открытии^как в http://docs.jquery.com/Tutorials:Live_Examples_of_jQuery в примере B, когда слайд-в в щелчке, текст показывает красиво, что я хочу, чтобы длинный текст делать.

---

После многих изменений и тестов я сделал это так, что ссылка открыть какой-нибудь текст, при нажатии ничего не меняется в адресной строке, и оно может быть отменено, нажав еще раз, так, чтобы помочь другим членам здесь окончательный код.

<script type='text/javascript'> 
function toggle(id) 
{ 
var el = document.getElementById(id); 
if(el.style.display == 'block') 
el.style.display = 'none'; 
else 
el.style.display = 'block'; 
} 
</script> 

<center> 

<table border="1" bordercolor="#999999" style="background-color:#00000" cellpadding="0" cellspacing="0" width="750"> 
<tr style="background-color:#00000 height: 50px; width : 250px; font-size: 25px"> 
<td> <center> Product </center> </td> <td> <center> Description </center> </td> <td> <center> Price </center> </td> 
</tr> 
<tr> 
<td>&nbsp;<a href="javascript:void(0)" onclick="toggle('hiddentext');">My product name</a> </td> <td>&nbsp;This is just an introducary description <p class="more" id="hiddentext" style="display: none;">This is a more complex description which should open only when the product name is clicked and here will be also a button to add to cart and some media .</p> <td> <center> <font size="3"> <b> $3 </b> </font> </center> </td> </tr> 
</table> 

</center> 

Теперь моя последняя вещь, чтобы сдвинуть текст красиво, как описано в моем редактирования, так что прийти в лучшую сторону, так что если кто-нибудь может помочь мне сделать это, было бы весьма признателен.

Answer 1

<script> 
 
function toggle(id) { 
 
    var el = document.getElementById(id); 
 
    if(el.style.display == 'block') 
 
     el.style.display = 'none'; 
 
    else 
 
    el.style.display = 'block'; 
 
} 
 
</script> 
 

 
<script src="files/jquery.js"></script> 
 

 
<center> 
 
    <table border="1" bordercolor="#999999" style="background-color:#00000" cellpadding="0"  cellspacing="0" width="750"> 
 
    <tr style="background-color:#00000 height: 50px; width : 250px; font-size: 25px"> 
 
     <td> <center> Product </center> </td> <td> <center> Description </center> </td> 
 
     <td> <center> Price </center> </td> 
 
    </tr> 
 
    <tr> 
 
     <td>&nbsp;<a href="#" class="readmore">My product name</a> </td> 
 
     <td> <a id="test" style="display:none">  &nbsp;This is just an introducary description <p class="more">This  is a more complex description which should open only when the product name is clicked and here  will be also a button to add to cart and some media .</p> </a><td> <center> <font size="3">  <b> $3 </b> </font>   </center> </td> 
 
    </tr> 
 
    </table> 
 
    </center> 
 

 
<a href="#" onclick="toggle('test');">Click to toggle</a>

что-то подобное ^^? Я еще не тестировал.

EDIT: проверено. Оно работает.

Answer 2

Try this: 

$(function(){ 
    $(".more").hide(); 
    $(".readmore").click(function(){ 
     $(".more").show(); 
    }); 

}); 

Answer 3

http://jsfiddle.net/fdtdX/

$('.more').hide() 
$('.readmore').on('click', function() 
{ 
    $(this).closest('tr').find('.more').show(); 
}) 

Answer 4

Это должно работать:

$(document).ready(function() { 
    $(".more").hide(); 
    $(".readmore").click(function(e) { 
     e.preventDefault(); //Prevent default link action 
     $(this).parent().parent().find(".more").toggle(); 
    }); 
});