Reverse Engineering Simple jQuery/Boostrap Script

JavaScript
1

If you visit this Bootstrap page, then click the button labeled “Button with data-target,” some hidden content is displayed. It doesn’t disappear until you click the button again.

This is the code:

<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Button with data-target
</button>
<div class="collapse" id="collapseExample">
  <div class="well">
    ...
  </div>
</div>

I have jQuery and Bootstrap both enabled on my site, but when I add this code, it does just the opposite: The content is displayed until you click the button. Can anyone tell me how to reverse engineer this gizmo so it does the opposite? I want it to hide the content by default, displaying only when someone clicks on the button.

Thanks.

2

Not sure what you’re doing wrong. The .collapse class is what sets it to hide.

3

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
4

Add the class to it and update the data-target.

5

Got it, thanks.

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.