I am looking to display just the list on large screens without the collapsible button, but I want the button to appear on mobile devices. I have attempted using hidden-lg or visible-xs classes on the button tag, but it ends up removing the entire row for larger screens. Is there a way to only display the collapsible button on mobile? Thank you in advance!
<button id="button" type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">
<span class="glyphicon glyphicon-collapse-down"></span> Show
</button>
<div id="demo" class="collapse">
<ol class="list-group">
<li class="list-group-item">Warrior</li>
<li class="list-group-item">Adventurer</li>
<li class="list-group-item">Mage</li>
</ol>
</div>
custom.js
$(function(){
$('#demo').on('hide.bs.collapse', function () {
$('#button').html('<span class="glyphicon glyphicon-collapse-down"></span> Show');
})
$('#demo').on('show.bs.collapse', function () {
$('#button').html('<span class="glyphicon glyphicon-collapse-up"></span> Hide');
})
})
I've also tried
#demo{
display: none;
}
@media (min-width: @screen-md-min) {
#demo{
display: block;
}
}