bootstrap3 collapse without id’s

The bootstrap3 collapse javascript plugin is actually quite flexible, but it’s very terse documentation and examples might make it a bit hard to figure out how.

The docs example shows using a data-toggle attribute on the trigger for the collapsing element, the thing that the user will click on to expand/contract. Then, in data-target on the same element,  you might supply a string id which identifies the content body, which will be shown/hidden.

If you are dynamically generating content one way or another, you might not have convenient id’s on the content bodies.

So, we might start looking at the various options the collapse plugin takes, and at using it “via Javascript; enable manually…”

There are a couple things that were confusing there to me:

  1. When applying manually with `$some_element.collapse();`, you apply to the content body, not the trigger. (Even though the default, where you trigger purely with data- attributes, you apply those data attributes to the trigger).
  2. Then you can make your own trigger, simply something which, on click, finds the relevant body and and triggers the collapse toggle action, maybe like `$(this).next(“.content-child”).collapse(“toggle”);`
  3. The collapse plugin will add the class `collapse` to your content body, which is styled by boostrap CSS to be hidden. To avoid any JS ‘flicker’, you probably want to manually add the `collapse` class to your content body  element yourself, so it always starts out hidden.  Then, in page load, when you want to apply the collapse plugin to your body, apply it like: `some_element.collapse({toggle: false});`, to avoid toggling it’s state to visible on page load when you apply the collapse plugin to it.

This stack overflow item, with accompanying jsfiddle, pretty much provide this solution and a demonstration. But also with fairly laconic explanation, it took me a bit of head scratching and looking at source code to figure out what was actually going on here.

no-js?

Personally, I still try to follow the old-school doctrine of unobtrusive javascript, where if a user-agent has javascript turned off, everything will still display perfectly usably.

So adding the .collapse class directly to my content body produces some undesirable effects — if javascript is turned off, the body will still be hidden by the CSS, but there will be no way to show it by triggering the collapse trigger.

This problem applies to the by-the-example use of bootstrap3 collapse too, as it also has the .collapse class applied directly to the content body.

The solution is pretty simple if you use the “no-js” class technique originally demonstrated by Modernizr. 

.no-js .collapse {
   display: block;
}

 

About these ads
This entry was posted in General. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s