title: Only enable data-toggle on mobile devices
body: <p>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?</p>
  
  <pre><code>  &lt;div class="row"&gt;
    &lt;div class="col-lg-12"&gt;
      &lt;div class="footer-links"&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-md-3 col-sm-4 panel" data-toggle="collapse" data-target="#about"&gt;
            &lt;h4 class="panel-title"&gt;
            &lt;a class="accordion-toggle"&gt;
              &lt;i class="material-icons"&gt;&amp;#xE145;&lt;/i&gt;
              Link Head
            &lt;/a&gt;
          &lt;/h4&gt;
            &lt;ul class="visible-sm visible-md visible-lg collapse" id="about"&gt;
              &lt;li&gt;&lt;a href=""&gt;link&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=""&gt;link&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=""&gt;link&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=""&gt;link&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=""&gt;link&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
          &lt;div class="col-md-3 col-sm-4 panel" data-toggle="collapse" data-target="#why"&gt;
            &lt;h4 class="panel-title"&gt;
            &lt;a class="accordion-toggle"&gt;
              &lt;i class="material-icons"&gt;&amp;#xE145;&lt;/i&gt;
              Link Head
            &lt;/a&gt;
          &lt;/h4&gt;
            &lt;ul class="visible-sm visible-md visible-lg collapse" id="why"&gt;
              &lt;li&gt;&lt;a href=""&gt;link&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=""&gt;link&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=""&gt;link&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=""&gt;link&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=""&gt;link&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
          &lt;div class="col-md-3 col-sm-4 panel" data-toggle="collapse" data-target="#quicklinks"&gt;
            &lt;h4 class="panel-title"&gt;
            &lt;a class="accordion-toggle"&gt;
              &lt;i class="material-icons"&gt;&amp;#xE145;&lt;/i&gt;
              Link Head
            &lt;/a&gt;
          &lt;/h4&gt;
            &lt;ul class="visible-sm visible-md visible-lg collapse" id="quicklinks"&gt;
              &lt;li&gt;&lt;a href=""&gt;link&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=""&gt;link&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=""&gt;link&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=""&gt;link&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=""&gt;link&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
          &lt;div class="col-md-3 col-sm-8"&gt;
            &lt;h4 class="deal-text"&gt;&lt;strong&gt;A bit of ad text&lt;/strong&gt;will go here&lt;/h4&gt;
          &lt;/div&gt;
          &lt;div class="col-md-3 col-sm-4"&gt;
            &lt;div class="footer-share"&gt;
              &lt;a href=""&gt;&lt;img src="/img/facebook_icon.png"&gt;&lt;/a&gt;
              &lt;a href=""&gt;&lt;img src="/img/twitter_icon.png"&gt;&lt;/a&gt;
              &lt;a href=""&gt;&lt;img src="/img/linkedin_icon.png"&gt;&lt;/a&gt;
              &lt;a href=""&gt;&lt;img src="/img/youtube_icon.png"&gt;&lt;/a&gt;
              &lt;a href=""&gt;&lt;img src="/img/google_icon.png"&gt;&lt;/a&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>jQuery</strong></p>
  
  <pre><code>$('[data-toggle="collapse"]').click(function(e) {
    if ($(window).width() &gt;= '321') {
      e.stopPropagation();
  
    } else if ($(window).width() &lt;= '320') {
      $('.panel').on('click', function() {
        $('.collapse').collapse('hide');
      });
    }
  });
  </code></pre>
  
  <p><strong>JSFIDDLE: <a href="https://jsfiddle.net/mxv9yq4m/11/" rel="nofollow">https://jsfiddle.net/mxv9yq4m/11/</a></strong></p>