Помогите со скриптом разворачивания текста

[Александр141]

<script type="text/javascript">
$(document).ready(function() {$('#opislink1').click(function() {
if ( jQuery.browser.msie && parseInt(jQuery.browser.version) == 6) {
if ($('#opis1').css("display")=="block") {$('#opis1').css("display", "none");
} else {$('#opis1').css("display", "block");
}
} else {$('#opis1').toggle("normal");
}
if ($('#button3').text()=='Развернуть') {$('#button3').text('Свернуть');
} else {$('#button3').text('Развернуть');
}
});
});
</script>

<a href="javascript:void(0)" id="opislink1"><class id="button3">Развернуть</div></a>
<div class="opis" id="opis1">Текст</div>

этот скрипт работает только с одной кнопкой разворачивания текста, а у меня на сайте их несколько. Как сделать, чтобы скрипт работал со всеми кнопками?

[Serg_pnz]

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

[Deff]

<script type="text/javascript" src="http://yandex.st/jquery/1.4.2/jquery.min.js"></script>
<style type="text/css">
div.opis{
   display:none;
   height:100px;
   width:340px;
   padding:12px;
   margin-top:12px;
    border-radius:15px;
    -webkit-border-radius:15px;
    -khtml-border-radius:15px;
    -moz-border-radius:15px;
    -o-border-radius:15px;
    -ms-border-radius:15px;

    box-shadow: 0px 5px 18px #000;
    -webkit-box-shadow:0px 5px 18px #000;
    -khtml-box-shadow:0px 5px 18px #000;
    -moz-box-shadow:0px 5px 18px #000;
    -ms-box-shadow:0px 5px 18px #000;
    }

a.opislink {
     margin-top:12px;
     display:block;
}
</style>




<div class="Wrap">
  <a href="#" class="opislink" >Развернуть</a> 
  <div class="opis">Текст</div>
</div>

<div class="Wrap">
  <a href="#" class="opislink" >Развернуть</a> 
  <div class="opis">Текст</div>
</div>

<div class="Wrap">
  <a href="#" class="opislink" >Развернуть</a> 
  <div class="opis">Текст</div>
</div>






<script type="text/javascript">
$(document).ready(function(){

  $('a.opislink:not(.active)').live('click',function(){
    $(this).addClass('active');
    $(this).html('Свернуть')
    $(this).parent().find('div.opis').slideDown(760)
    return false;
  });

  $('a.opislink.active').live('click',function(){
    $(this).removeClass('active');
    $(this).html('Развернуть')
    $(this).parent().find('div.opis').slideUp(760)
    return false;
  });

});
</script>

[dimas15]

Deff,
Очень красиво.) а можно сделать чтобы заголовки оставались прежнеми?!

[Александр141]

спасибо огромное

[Serg_pnz]

Deff,
я тебя оч. уважаю за то что ты делаешь для новичков, но не лучше ли дать удочку, а не рыбу?))

[Deff]

Serg_pnz,
Ну мож я чуть эгоист - шеф просил нарастить скорость

[Александр БЛА БЛА]

у меня такаяже проблема... накидал скриптов текст почти также красиво раскрывается(без рамки) но мне нужно чтоб при нажатии на следующую ссылку предыдущий текст закрывался

[Александр БЛА БЛА]

Deff,
поможите

[Deff]

<script type="text/javascript" src="http://yandex.st/jquery/1.4.2/jquery.min.js"></script>
<style type="text/css">
div.opis{
   display:none;
   height:100px;
   width:340px;
   padding:12px;
   margin-top:12px;
    border-radius:15px;
    -webkit-border-radius:15px;
    -khtml-border-radius:15px;
    -moz-border-radius:15px;
    -o-border-radius:15px;
    -ms-border-radius:15px;

    box-shadow: 0px 5px 18px #000;
    -webkit-box-shadow:0px 5px 18px #000;
    -khtml-box-shadow:0px 5px 18px #000;
    -moz-box-shadow:0px 5px 18px #000;
    -ms-box-shadow:0px 5px 18px #000;
    }

a.opislink {
     margin-top:12px;
     display:block;
}
</style>




<div class="Wrap">
  <a href="#" class="opislink" >Развернуть</a> 
  <div class="opis">Текст</div>
</div>

<div class="Wrap">
  <a href="#" class="opislink" >Развернуть</a> 
  <div class="opis">Текст</div>
</div>

<div class="Wrap">
  <a href="#" class="opislink" >Развернуть</a> 
  <div class="opis">Текст</div>
</div>






<script type="text/javascript">
$(document).ready(function(){

  $('a.opislink:not(.active)').live('click',function(){
    $('a.opislink.active').click();
    $(this).addClass('active');
    $(this).html('Свернуть')
    $(this).parent().find('div.opis').slideDown(760)
    return false;
  });

  $('a.opislink.active').live('click',function(){
    $(this).removeClass('active');
    $(this).html('Развернуть')
    $(this).parent().find('div.opis').slideUp(760)
    return false;
  });

});
</script>