---
title: "Dynamic content filtering with OxygenXML’s webhelp output"
date: 2014-11-19
description: "$( document ).ready(function() { // Handler for .ready() called. $("
canonical_url: https://idratherbewriting.com/2014/11/19/dynamic-content-filtering-with-oxygenxmls-webhelp-output/
---
# Dynamic content filtering with OxygenXML’s webhelp output
Here’s a topic in my DITA QRG that contains a [link to a demo of the content filter](https://idratherbewriting.com//jquery_content_selector/).

[![dynamic](https://s3.us-west-1.wasabisys.com/idbwmedia.com/images/dynamic-1024x585.png)](https://idratherbewriting.com//jquery_content_selector/)

When you select an option in the upper-right corner, the content dynamically changes on the page to show only that option.

This is a bit of a magic trick, and when you see behind the curtain, it’s much less impressive. Basically I have different styles associated with different content. When you select a menu option, it triggers a jQuery style switcher plugin to add a class to the `body` tag. Then based on my styles for that `body` class, content is either hidden or shown.

As an added bonus, any items in the table of contents that have the same class will also be either hidden or shown. (Given that OxygenXML’s webhelp is a frames-based output, including the TOC is harder than it seems.)

I described the method for implementing my dynamic content filtering here: [Create a content selector](https://idratherbewriting.com//jquery_content_selector/). To see a demo of the content selector, see [Content Selector Demo](https://idratherbewriting.com//jquery_content_selector/).

## Limitations

There are a few limitations with the method I’ve used here. The hidden content will still appear in search results, because the search doesn’t care which elements certain styles are using. Also, if you’re using the [mini-TOC method](https://idratherbewriting.com/add_mini_toc,) any hidden `h2` sections will get rendered into the mini-TOC.

Also, I couldn’t figure out how to get the menu selector to appear only for specific pages. It only appears globally. One problem is that the selector code resides in a header file, with code that is only valid in the XHTML header file format, not in regular DITA topics. (I tried inserting the content post-build through jQuery’s `append` method, but for whatever reason, it didn’t work.) 

## Other ways to go about dynamic filtering

There are probably better ways to go about dynamic content filtering. With a database model for help, the option a user selects could determine how content is queried in real-time from a database. In that model, content wouldn’t just be hidden – it would not be in the source code at all. (But if you go that route, you have a database to deal with.)