Bootstrap panel: collapsed on mobile but expanded on desktop, how?

Question

How can I as simply as possible remove the class "in" from the div with id "panel-login" if the screen are smaller than 1199px (Bootstrap's xs, sm and md modes). I guess some kind of JS or JQuery could solve it but I'm not very good at either.

<div class="panel-group">
<div class="panel panel-default">
    <div class="panel-heading">

        <div class="row">

            <div class="col-xs-10">
                <h4 class="panel-title">Login</h4>
            </div>

            <div class="col-xs-2 text-right">
                <a data-toggle="collapse" href="#panel-login"><i class="fa fa-bars"></i></a>
            </div>

        </div>

    </div>

    <div id="panel-login" class="panel-collapse collapse in">

        <div class="panel-body">

            <ul>
                <li><a href="<?=$php_self?>?page=login&view=signup">Create account</a></li>
                <li><a href="<?=$php_self?>?page=login&view=reset_password">Reset password</a></li>
                <li><a href="<?=$php_self?>?page=login&view=reactivate_account">Reactivate account</a></li>
            </ul>

        </div><!-- end panel-body -->

    </div>

</div><!-- end panel-default -->

Answer 1

You could use a CSS @media query to hide it.. overriding the effect if the .in

@media (max-width:1199px) {
    #panel-login {
        display:none;
    }
}

CSS: http://codeply.com/go/Q4X15Bp31R

Or, you can use jQuery and watch the resize event like this..

function togglePanel (){
   var w = $(window).width();
   if (w <= 1199) {
      $('#panel-login').removeClass('in');
   } else {
      $('#panel-login').addClass('in');
   }
}

$(window).resize(function(){
     togglePanel();
});

togglePanel();

jQuery: http://codeply.com/go/okQQKcdO7v

Answer 2

This is what I used:

@media (min-width: 768px) {
  #my-div .collapse {
    display: block;
  }
}

Answer 3

HTML

In you panel-heading element just add

<span class="pull-right clickable"><i class="glyphicon glyphicon-chevron-down"></i></span>

And in your panel-body element add "collapse":

<div class="panel-body collapse">

JAVASCRIPT

$(document).on('click', '.panel-heading span.clickable', function(e){
    var $this = $(this);
    var d = $this.parents('.panel').find('.panel-body');
        if(!d.hasClass('collapse in')) {
            d.slideDown();
            d.addClass('in');
            $this.find('i').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up');
        }
        else {
            d.slideUp();
            d.removeClass('in');
            $this.find('i').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
        }
})

Once you've added the javascript snippet globally you are able to toogle every panel by just adding the HTML snippet.

To make it collapsed for mobile devices just trigger the collapse() function for mobile devices,like

if (($(window).width()) > 767) {
    $('.collapse').collapse();
} 

OR you could check if the hamburger menu is visible

if (!$('.navbar-toggle').is(':visible')) {
  $('.collapse').collapse();
}