특정 영역(DIV) 여닫기 기능 Toggle

<script type="text/javascript">

$(function() {

$('#ma-search-toggle').click(function(e) {

e.preventDefault();

var $toggle =  $('div.box > .box-comments');

if ($toggle.is(':visible')) {

$(this).switchClass('fa-chevron-circle-up', 'fa-chevron-circle-down'); //클래스 변경

$('div.box > .box-comments').slideUp();  // 슬라이드 업 [닫힘]

} else {

$(this).switchClass('fa-chevron-circle-down', 'fa-chevron-circle-up'); //클래스 변경

$('div.box > .box-comments').slideDown(); // 슬라이드 업 [열림]

};

});

});

</script>

<i class="fa fa-chevron-circle-up" id="ma-search-toggle" style="cursor: pointer;"></i>

<div class="box-body box-comments" style="padding-bottom: 0">

닫히고 열리고 

</div>