Edit in JSFiddle

<dl>
    <dt><span></span>이게 뭔가요?</dt>
    <dd>나도 몰라...</dd>
    <dt><span></span>질문입니다...</dt>
    <dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum maiores.</dd>
</dl>

var acodian = {

    click: function (target) {
        var _self = this,
                $target = $(target)
        $target.on('click', function () {
            if ($(this).next('dd').css('display') == 'none') {
                $('dd').slideUp();
                _self.onremove($target);

                $(this).addClass('on');
                $(this).next().slideDown();
            } else {
                $('dd').slideUp();
                _self.onremove($target);

            }
        });
    },
    onremove: function ($target) {
        $target.removeClass('on');
    }

};

acodian.click('dt');

* { margin: 0; padding: 0; }
dl { }
dt, dd { padding: 10px; }
dt { background-color: #cfc; margin-bottom: 5px; }
dt span { display: inline-block; width: 5px; height: 5px; background-color: black;
    vertical-align: middle; margin-right: 10px; }
dt.on span { background-color: red; }
dd { background-color: tan; margin-bottom: 5px; display: none; }