Bootstrap footer collapse

[toolman]

Hi there,

I am looking at this script:

What I would like to do is to have the 3 columns collapsed when on mobile view and to be collapsible when clicking the (- minus) symbol.

Could anyone help me achieve this?

Thanks!

[PaulOB]

Probably best to wait for one of the JS experts but I think you could do it like this using matchmedia (all modern browsers).

$(document).ready(function() {

  var mql = window.matchMedia("screen and (max-width: 768px)")
  mediaqueryresponse(mql) // call listener function explicitly at run time
  mql.addListener(mediaqueryresponse) // attach listener function to listen in on state changes

  function mediaqueryresponse(mql) {
    if (mql.matches) {
      $(".taber").attr("data-toggle", "collapse");
      $('.collapse').collapse("hide");
    } else {
      $('.collapse').collapse("show");
      $("[data-toggle='collapse']").removeAttr("data-toggle");
    }
  }

});

Probably need to tidy up your media queries for the above as the underline seems to be missing when it collapses but then is correct at about 723px.

@toolman

What I would like to do is to have the 3 columns collapsed when on mobile view and to be collapsible when clicking the (- minus) symbol.

Note that your code is already working if you open the window at that size before you load the page as you are only setting the routine on page load and not on resize. Therefor the routine is working on mobile and will work on desktop if you refresh when window is smaller. You would need to use the resize event to make it responsive but that will slow the page down. The matchmedia approach does not suffer from this problem and is basically media queries via js.

The js experts will explain it better.