Jquery Custom collapsible list plug-in

$.fn.collapsible_list = function(options) {
return this.each(function() {
var thisObj = $(this);
        var settings = $.extend({
collapsed: true,
expandControl: $(thisObj).find('.expand-control'),
collapseControl: $(thisObj).find('.collapse-control'),
childWrap: $(thisObj).find('.child-list'),
}, options );

settings.collapsed = $(thisObj).hasClass('collapsed');
if (settings.collapsed)
{
$('.child-list').hide();
}
$(settings.expandControl).click(function(){
$(this).hide();
$(settings.collapseControl).show(500);
$(settings.childWrap).slideDown('medium');
})
$(settings.collapseControl).click(function(){
$(this).hide();
$(settings.expandControl).show(500);
$(settings.childWrap).slideUp('medium');
})
    });
};

$( ".collapsible-list" ).collapsible_list();



<ul class="collapsible-list collapsed group-child-list">
<li class="parent-item">
<input type="checkbox" name="groups[]" value="" class="post_target_selector facebook-selector twitter-selector">
MyGroup
<i class="fa fa-plus-square-o expand-control" aria-hidden="true" style="display: none;"></i>
<i class="fa fa-minus-square-o collapse-control" aria-hidden="true" style="display: inline-block;"></i>
</li>
<ul class="child-list" style="display: block;">
<li class="child-item">
Anas (Twitter Account)
</li>
<li class="child-item">
PandreGroup (Facebook Group)
</li>
<li class="child-item">
Anas Pandre (Facebook Account)
</li>
<li class="child-item">
Hey Music (Facebook Page)
</li>

</ul>
</ul>

.collapsible-list
{
margin: 0;
ul,li
{
list-style-type: none;
margin: 0;
padding: 0;
}
.child-list {
margin-left: 1.5rem;
}

.collapse-control, .expand-control
{
cursor: pointer;
}

.child-item
{
font-size: .875rem;
font-weight: normal;
line-height: 1.8;
}
}

.collapsible-list.collapsed
{
.collapse-control
{
display: none;
}
.child-list
{
display: none;
}
}
.collapsible-list.expanded
{
.expand-control
{
display: none;
}
}