Javascript-форум - Помагите пожалуйста !

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

Код:

<html>

 <head>

  <title>Смартфоны</title>

 

 </head>

 <body>

<center>

 <p class="fig"><img src="http://mobile-technology.ru/wp-

content/themes/techhosting/images/i.jpg" 

width="150"></p>

  <p alight="center">Sony Xperia Z3 Compact</p>

<br>

<script type="text/javascript" 

src="http://code.jquery.com/jquery-1.6.2.min.js"></script>

<a id="toggler" href="">Характеристики</a>

<div id="hiddentext" style="display:none">

<br>ОС: Android 4.4 </br>

<br>Тип корпуса: классический </br></div>

<script type="text/javascript">

$('a#toggler').toggle(function(event){

$('#hiddentext').slideDown();

event.preventDefault();

},function(event){

$('#hiddentext').slideUp();

event.preventDefault();

});

</script>

</br>

  </center>

 </body>

<hr>

<body>

<center>

 <p class="fig"><img src="http://mobile-technology.ru/wp-

content/themes/techhosting/images/g.jpg" 

width="150"></p>

  <p alight="center">Sony Xperia Z3 Compact</p>

<br>

<script type="text/javascript" 

src="http://code.jquery.com/jquery-1.6.2.min.js"></script>

<a id="toggler" href="">Характеристики</a>

<div id="hiddentext" style="display:none">

<br>ОС: Android 4.4 </br>

<br>Тип корпуса: классический </br></div>

<script type="text/javascript">

$('a#toggler').toggle(function(event){

$('#hiddentext').slideDown();

event.preventDefault();

},function(event){

$('#hiddentext').slideUp();

event.preventDefault();

});

</script>

</br>

  </center>

</body>

</html>