A Simple jQuery FAQ style Show and Hide

jquery-faq-show-hide

Animated show/hide expanders seem to be very popular with clients lately. Although the jQuery UI library has a good accordion plugin that utilizes the Themeroller style gallery, it’s often overkill or not quite right for simple applications.

I’ve created a very simple and lightweight jQuery show and hide FAQ style application below that can easily be modified to suite a variety of purposes.

The HTML

The HTML here is pretty simple. A definition list makes a lot of sense for a series of questions and responses, and gives me 3 inter-related elements, all I need for this application.

1
2
3
4
5
6
7
8
9
10
<dl id="faqs">
  <dt>Question 1</dt>
  <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit</dd>
 
  <dt>Question 2</dt>
  <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit</dd>
 
  <dt>Question 3</dt>
  <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit</dd>
</dl>

The jQuery

The jQuery is only slightly more complex than the HTML. We use the .hide function to, naturally, hide all our answers. The next piece binds our questions (terms) to a click function where we then slide toggle (open or close as needed) the very next answer that comes along. Finally we tack on an expanded task that we can use to hang on an updated indicator image.

1
2
3
4
5
6
7
<script type="text/javascript">
    $("#faqs dd").hide();
    $("#faqs dt").click(function () {
        $(this).next("#faqs dd").slideToggle(500);
        $(this).toggleClass("expanded");
    });
</script>

The CSS

Very little CSS is needed at this point. We could do some fancy CSS3 footwork for the icons, but I just went with a pair of simple images here, consider using a sprite instead to make up for the decreased efficiency.

1
2
3
4
5
#faqs dt, #faqs dd { padding: 0 0 0 50px }
#faqs dt { font-size:1.5em; color: #9d9d9d; cursor: pointer; height: 37px; line-height: 37px; margin: 0 0 15px 25px}
#faqs dd { font-size: 1em; margin: 0 0 20px 25px}
#faqs dt { background: url(http://www.designonslaught.com/files/2012/06/expand-icon.png) no-repeat left}
#faqs .expanded { background: url(http://www.designonslaught.com/files/2012/06/expanded-icon.png) no-repeat left}

The Demo

Question 1
Lorem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit
Question 2
Lorem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit
Question 3
Lorem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit

This entry was posted in Snippets and Demos.