4

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>
Zariweya
  • 295
  • 3
  • 13

5 Answers5

6

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. :)

Gabriel Loch
  • 76
  • 1
  • 4
  • Navbar would glitch because it would go through "collappsing collapse show" classes (check browser inspector) when on desktop, this helped, thanks man :) – borgmater May 17 '23 at 18:04
3

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!

tnog
  • 420
  • 3
  • 12
1

You can use media queries for that. Check for the screen sizes you do not want it to appear and target them with some css styling. To style a standard desktop for example you can do:

@media (min-width:1281px) { 
   /* your css */
}

You can use this css to not show the collapse2 div for example:

@media (min-width:1281px) {
  #collapse2{
     display: none;
  }
}

See how to target different devices here

Abdoulie Kassama
  • 782
  • 10
  • 20
  • Combined with `pointer-events: none;` on the controlling element this is perfect and way more simple approach than any jQuery hacking. – Bence Szalai Sep 21 '20 at 22:02
0

You can add media queries for normal PC and for tab/mobile width in your stylesheet. As width shrinks media query will trigger and code will get executed as per device width.

gaurangmarulkar
  • 19
  • 4
  • While this might be a valuable hint to solve the problem, a good answer also demonstrates the solution. Please [edit] to provide example code to show what you mean. Alternatively, consider writing this as a comment instead. – Toby Speight Sep 04 '17 at 16:52
0

I used a small snippet of jquery with bootstrap-4 to achieve something similar. Hope it helps somebody ! You can always change the dimensions according to your needs by referring the Bootstrap grid sheet.

$(window).resize(function() {
    if ($(window).width() <= 992)
    {
        $('#filter_btn').attr("data-toggle", "collapse");
        $('#filter_menu').collapse('hide');
    }
    else
    {
        $('#filter_btn').attr("data-toggle", "");
        $('#filter_menu').collapse('show');
    }
});
<a id="filter_btn" data-toggle="collapse" href="#filter_menu" role="button" aria-expanded="false" aria-controls="filter_menu">
  <h4>Switch</h4>
</a>
<div class="filter_sel collapse" id="filter_menu">
  Content Here
</div>
Pulkit Ahuja
  • 51
  • 4