Reverse Engineering Simple jQuery/Boostrap Script

I found the problem…

<script>
$(document).ready(function() {
  if ($(window).width() >= 450) {
    $('.collapse').show();
  } else {
    $('.collapse').collapse().collapse('show');
  }
});
</script>

That’s a special rule I added to collapse all the headings in my articles in mobile devices, similar to Wikipedia’s mobile pages. In other words, if you view a page in a cell phone, you’ll just see a series of headings (with the h2 tag)…

Introduction
Origin
Summary

Clicking on any of the above headings will reveal the content.

So I now have a new question…how can I modify the script I posted above so that it only affects h2 elements inside the article tag?..

<article>
<h2>Introduction</h2>
<h2>Origin</h2>
</article>

Or should I start a new topic?

1 Like