<script type="text/javascript">
(function($){
$(document).ready(function(){
$('#cssmenu li.active').addClass('open').children('ul').show();
    $('#cssmenu li.has-sub>a').on('click', function(){
        $(this).removeAttr('href');
        var element = $(this).parent('li');
        if (element.hasClass('open')) {
            element.removeClass('open');
            element.find('li').removeClass('open');
            element.find('ul').slideUp(300);
        }
        else {
            element.addClass('open');
            element.children('ul').slideDown(300);
            element.siblings('li').children('ul').slideUp(300);
            element.siblings('li').removeClass('open');
            element.siblings('li').find('li').removeClass('open');
            element.siblings('li').find('ul').slideUp(300);
        }
    });
});
})(jQuery);
</script>        



 

아코디언 관련 제이쿼리 입니다.

 




    <li class="has-sub line-bottom"><a href="#">브랜드</a>
                <ul  class="sidebar-nav-e1" id="sidebar-menu2">
                    
                        <li class="has-sub line-bottom" id="brand_div">
                            <span class="brand_span">선택된 브랜드: </span>
                                <input type="text" name="serch_text" id="serch_text" class="serch_text">
                                </li>
                        <li class="sidebar-nav-e1 has-sub" id="sidebar-menu2">                
                <?php  ?>
                
                <li class="sidebar-nav-item">
                    <label class="checkboxnone"></label>
                        <a href="#">
                        <input type="checkbox" value="<?php echo $row['br_name'];?>" class="br_checkbox" data-id="<?php echo $row['br_code'];?>"><?php echo $row['br_name'];?>
                    </a>
                </li>




 

 

아코디언 제이쿼리 입니다.

클릭시에 아래로 아코디언 되어서 li를 전체로 보여주는데

 

li전체를 보여주는게 아닌 아코디언이 동작할때 li들이 300px정도로만 보여지게 가능할까요?