ASP.NET Repeater Combined with jQuery FAQ Plugin Demo

Earlier this week, Chris Blankenship released version one of a new jQuery FAQ plugin. I was pretty excited looking at his demo as I have a need for something like this in a project and his plugin should work nicely. I built a quick demo of my own to try it out and thought I would share with you what I did.

Screenshots of End Product:

The plugin is really straight forward. You just have to add your FAQ items in a header element such as an h2 and content sections in spans. This could be done in a pure HTML page or the FAQ items and content could be pulled from a database or XML file like I did in the download. Once the markup is built, the plugin does the rest. It will hide the content sections, add click events to the headers to open and close the content sections, toggle the plus/minus symbols and build the index shown on the right if you want. The plugin also adds ids to each header element to be used as bookmarks so that when you click on an item in the index you are taken to the position of the FAQ item/content on the page. A click event on each index item also shows the content when clicked.

In the demo/download I databound an ASP.NET Repeater to data from an XML file to dynamically build the markup:

Note that the div with id “faq” surrounding the repeater is used by the plugin to locate the markup you want to use to create the FAQ.

I ran into one issue that gave me a little grief. Since the plugin uses the text from the FAQ item to build the bookmark, any special characters (such as my question mark at the end of each item) will cause problems. Chris pointed this out in his post about the plugin, but by the time I started messing with the code I forgot so it took me a little while to figure out why things were not working. I managed to get things working, but Chris helped me out with an improvement to the regular expression in the plugin that was already striping out white space to also strip the question marks:

var entryNameSafe = entryName.replace(/(\s|\?)/g, "")
          

I want to point out that Chris did a nice job setting the plugin up to be unobtrusive. The screenshot below is what things look like with JavaScript turned off:

All in all, I am really excited about this plugin. Chris mentioned in his post that he may work on a control for BlogEngine.NET to easily create the FAQ items. If your interested in BlogEngine.NET like I am, you may want to subscribe to his feed and encourage him to do so. I’m sure he would appreciate a few more kicks and dzone votes to get some more exposure for his plugin as well.

Be sure to checkout the live demo.