<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div> <a href="" class="spoiler_links">Спойлер №1 (кликните для показа/скрытия)</a> <div class="spoiler_body"> Текст под спойлером<br> плавно появляется<br> и плавно исчезает<br> при клике по спойлеру </div> </div>

<script type="text/javascript"> jQuery(document).ready(function(){ jQuery('.spoiler_links').click(function(){ jQuery(this).parent().children('div.spoiler_body').toggle('normal'); return false; }); }); </script> <style type="text/css"> .spoiler_body {display:none;} .spoiler_links {cursor:pointer;} </style> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>