Only enable data-toggle on mobile devices

Question

Having an issue getting the lists of links to expand on click only on mobile. I currently have them set to be collapsed on mobile, and expanded on tablet/desktop. The links should not be clickable when on tablet/desktop. How can I re-enable the click event to toggle the lists on mobile?

  <div class="row">
  <div class="col-lg-12">
    <div class="footer-links">
      <div class="row">
        <div class="col-md-3 col-sm-4 panel" data-toggle="collapse" data-target="#about">
          <h4 class="panel-title">
          <a class="accordion-toggle">
            <i class="material-icons">&#xE145;</i>
            Link Head
          </a>
        </h4>
          <ul class="visible-sm visible-md visible-lg collapse" id="about">
            <li><a href="">link</a></li>
            <li><a href="">link</a></li>
            <li><a href="">link</a></li>
            <li><a href="">link</a></li>
            <li><a href="">link</a></li>
          </ul>
        </div>
        <div class="col-md-3 col-sm-4 panel" data-toggle="collapse" data-target="#why">
          <h4 class="panel-title">
          <a class="accordion-toggle">
            <i class="material-icons">&#xE145;</i>
            Link Head
          </a>
        </h4>
          <ul class="visible-sm visible-md visible-lg collapse" id="why">
            <li><a href="">link</a></li>
            <li><a href="">link</a></li>
            <li><a href="">link</a></li>
            <li><a href="">link</a></li>
            <li><a href="">link</a></li>
          </ul>
        </div>
        <div class="col-md-3 col-sm-4 panel" data-toggle="collapse" data-target="#quicklinks">
          <h4 class="panel-title">
          <a class="accordion-toggle">
            <i class="material-icons">&#xE145;</i>
            Link Head
          </a>
        </h4>
          <ul class="visible-sm visible-md visible-lg collapse" id="quicklinks">
            <li><a href="">link</a></li>
            <li><a href="">link</a></li>
            <li><a href="">link</a></li>
            <li><a href="">link</a></li>
            <li><a href="">link</a></li>
          </ul>
        </div>
        <div class="col-md-3 col-sm-8">
          <h4 class="deal-text"><strong>A bit of ad text</strong>will go here</h4>
        </div>
        <div class="col-md-3 col-sm-4">
          <div class="footer-share">
            <a href=""><img src="/img/facebook_icon.png"></a>
            <a href=""><img src="/img/twitter_icon.png"></a>
            <a href=""><img src="/img/linkedin_icon.png"></a>
            <a href=""><img src="/img/youtube_icon.png"></a>
            <a href=""><img src="/img/google_icon.png"></a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

jQuery

$('[data-toggle="collapse"]').click(function(e) {
  if ($(window).width() >= '321') {
    e.stopPropagation();

  } else if ($(window).width() <= '320') {
    $('.panel').on('click', function() {
      $('.collapse').collapse('hide');
    });
  }
});

JSFIDDLE: https://jsfiddle.net/mxv9yq4m/11/

Fernando Torres · Answer 1 · 2016-04-04T16:19:53.187

0

Also you can calculate the size of the screen and at this statement do something. So, if you are calculating pixels, you can try:

<script type="text/javascript">
//Call the mobile_collapse() function in your DOM

   $(function(){
    mobile_collapse()
  );

    function mobile_collapse() {
        //NOTE: THE UNIVERSAL DIMENSION FOR CALCULATE MOBILE SCREEN IS 768PX IN MEDIA QUERY LIKE CSS
        var mediaquery = window.matchMedia("(max-width: 768px)");
        //Here, if the screen is <= 768px, you will show the collapse because we are in a mobile device.
        if (mediaquery.matches) { 
        //we will show the colapse
          $('.collapse').hide('show');
        } 
        //If this is not, you will:
        else {
          //we hide the colapse if the size is up to 768px, like a tablet or desktop because is not a mobile device
            $('.collapse').collapse('hide');
        }   
    }
</script>

edited Apr 04 '16 at 16:19

answered Apr 04 '16 at 15:48

Fernando Torres

460
7
24

This isn't affecting the toggle. It needs to toggle only on mobile (so up to 414px for iphone 6 plus) and not on desktop. – user3438917 Apr 04 '16 at 15:59
I'm using the data-toggle attribute, which may be overriding this. If you put your update into the fiddle, you'll notice that it isn't having any affect. – user3438917 Apr 04 '16 at 16:10
Hmmm, applying this to the fiddle still doesn't function correctly. Also, this will only affect the display of the lists on mobile/desktop, not the toggle functionality. – user3438917 Apr 04 '16 at 16:34
Can you provide a fiddle where this works for you? Thanks. – user3438917 Apr 04 '16 at 18:32

score 0 · Answer 2 · answered Apr 04 '16 at 18:58

0

The solution ended up being to place:

.collapse.in{
  display:block!important;
}

inside the mobile media query. This allows the sections to go from display:none to visible on click.

answered Apr 04 '16 at 18:58

user3438917

417
1
7
26

Only enable data-toggle on mobile devices

2 Answers2

Linked