1. CSS
.hide {
display: none;
}
.show {
padding: 5px;
background: #fff;
border: 1px solid #ccc;
box-shadow: #ccc 0 0 10px;
border-radius: 5px;
width: 320px;
}
2. Подключение jQuery
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
3. JavaScript
<script type="text/javascript">
(function($) {
$.fn.dropDownBlock = function(block, options) {
var defaults = {
speed: 'fast',
top: $(this).height(),
left: 0
},
opts = $.extend(defaults, options),
toggler = $(this),
block = $(block);
toggler.css({'outline': 'none'})
toggler.click(function(e) {
e.preventDefault();
$(block).css({
'position' : 'absolute',
'top' : (toggler.offset().top + opts['top']) + 'px',
'left' : (toggler.offset().left + opts['left']) + 'px'
});
if($(block).is(':visible')) $(block).fadeOut(opts['speed']);
else $(block).fadeIn(opts['speed']);
this.focus();
});
toggler.blur(function() {
$(block).fadeOut(opts['speed']);
});
};
})(jQuery);
// на каждую ссылку своя строка с link и block
$('#link').dropDownBlock($('#block'));
</script>
JS вставляем перед закрывающим тэгом
4. HTML
<!-- Ссылка -->
<a href="#" id="link">активное ядро галактики</a>
<!-- Блок -->
<div class="hide show" id="block">
<b>Активные ядра галактик</b> — ядра галактик, наблюдаемые процессы в которых нельзя объяснить свойствами находящихся в них звезд и газово-пылевых комплексов.
</div>
