Появление/исчезновение дива при клике на ссылку

[nickostyle]

Есть ссылка

<a href="#">меню</a>

Нужно чтобы при клике на нее появлялся блок. При этом ссылка должна получить класс active. При повторном клике на ссылку, или при клике на body блок должен исчезнуть.

Проект работает с jquery. Так что его использование допускается. Сам решить не могу, т.к. работаю в графических редакторах) Хочется простое и элегантное решение. Заранее признателен!

[Hoshinokoe]

nickostyle,

<a id="link1" href="#">Click me</a>
<div id="content1" style="display: none;">Content should be here!</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $('a#link1').click(function (e) {
            $(this).toggleClass('active');
            $('#content1').toggle();
                
            e.stopPropagation();
        });

        $('body').click(function () {
            var link = $('a#link1');
            if (link.hasClass('active')) {
                link.click();
            }
        });
    });

</script>

[nickostyle]

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

[Hoshinokoe]

nickostyle,

$(document).ready(function () {
        $('a#link1').click(function (e) {
            $(this).toggleClass('active');
            $('#content1').toggle();
                
            e.stopPropagation();
        });

        $('#content1').click(function (e) {
            e.stopPropagation();
        });

        $('body').click(function () {
            var link = $('a#link1');
            if (link.hasClass('active')) {
                link.click();
            }
        });
    });

[bullshmaiser]

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

[alex72bel]

Hoshinokoe,
Подскажите как сделать так, чтобы блок например при клике выскакивал не вниз а вверх?