Delete/disable bootstrap collapse on desktop view

Question

I have a page with two sections: Calendar and Information. I want to show it in different ways depending on the device: normal if I am using my pc and with an accordion if im using my tablet/mobile.

Is this possible?

This is the current code. It already has the accordions set.

<div class="container">        
    <div class="panel-group" id="accordion">    
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Calendar</a>
                </h4>
            </div>
            <div id="collapse1" class="panel-collapse collapse in">        
                <div class="container col-md-4">                            
                    <div class="row">
                        <div class="col-md-12 col-sm-6">
                            <div id="calendar"></div>
                        </div>
                    </div>                                                               
                </div>                  
            </div>              
        </div>    
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Information</a>
                </h4>
            </div>
            <div id="collapse2" class="panel-collapse collapse">
                <div class="container col-md-8">
                    <div id="alert_placeholder"></div>
                    <div class="panel panel-default">
                        <div id="panel" tabindex="1"></div>
                        <div class="panel-heading">                               
                        </div>
                        <div class="panel-body" id="info-panel">                          
                        </div>
                    </div>
                </div>               
            </div>
        </div>        
    </div>
</div>

Answer 1

I was having the same problem.

I was able to solve using only CSS with the code below.

@media screen and (min-width: 1024px){
  .collapse {
      display: block;
      height: auto !important;
      visibility: visible;
    }
    .collapsing{
      position: relative;
      height: unset !important;
      overflow: hidden;
    }
}

Hope it helps someone else. :)

Answer 2

So, I was just working on this today. The full solution for me required some additional CSS, but basically this can be done using a little jquery:

   // First you'll need to disable the default collapsible 
   // behavior on large screens:

    $('a[data-toggle="collapse"]').click(function(e){
      if ($(window).width() >= 768) { 
        // Should prevent the collapsible and default anchor linking 
        // behavior for screen sizes equal or larger than 768px.
        e.preventDefault();
        e.stopPropagation();
      }    
    });

    var $win;

    // Function toggles bootstrap collapse based on window width.
    function toggleCollapse($win) {
      // Small screens
      if ($win.width() < 768) {  
        $('.panel-collapse').collapse('hide');
      }
      if ($win.width() >= 768) {  
          $('.panel-collapse').collapse('show');
      }
    }

    // Set collapsible appearance on window load;
    toggleCollapse($(window));

    // Toggle collapsibles on resize. Optional if you want 
    // to be able to show/hide on window resize.
    $(window).on('resize', function() {
      var $win = $(this);
      toggleCollapse($win);
    });

I added some additional styles to modify the appearance of my elements based on whether they were viewed on desktop, or mobile. Hope that this helps!