yevlakhov
5/15/2013 - 5:02 PM

Раскрывающийся - закрывающийся блок (Спойлер)

Раскрывающийся - закрывающийся блок (Спойлер)

gistfile1.html
content_copyfile_download
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script type="text/javascript">
$(document).ready(function(){
  $('#slide-holder #slide').hide();
  $('#slide-holder #opener').click(function() {
    $(this).parent('#slide-holder').toggleClass('active');
    $(this).parent('#slide-holder').find('#slide').slideToggle(500);
    if($('#slide-holder').hasClass('active')) {
      $(this).html('Скрыть текст');
    }
    else {
      $(this).html('Читать далее');
    }
  });
})
</script>
</head>
  
<body>
  <div id="slide-holder">
    <div id="slide">Текст<br />который<br />должен<br />скрываться<br />и<br />раскрываться.<br />Его очень<br />много<br />и он<br />выезжает.</div>
    <p id="opener">Читать далее</p>
  </div>
</body>
  
  
</html>