My goal is to display my userlist without a toggle button by default when the screen is in full size, and only provide a toggle button when the screen is in mobile size to allow users to show/hide the list.
Currently, I am utilizing the following code:
<button type="button" class="btn btn-default" data-toggle="collapse" data-target="#demo">Users Online</button>
<div id="demo" class="collapse">
<div ng-repeat="user in chatCtrl.userList">{{user}}</div>
</div>
<script>
$(document).ready(function(){
$("#demo").on("hide.bs.collapse", function(){
$(".btn").html(' Users Online');
});
$("#demo").on("show.bs.collapse", function(){
$(".btn").html(' Users Online');
});
});
</script>
However, the toggle button appears even when the screen is in full size.
Therefore, my question is: how can I make the toggle button visible only when the screen collapses?
I would greatly appreciate any suggestions or references. Thank you!