Easy jQuery for beginners

A simple show/hide that uses jQuery to display a FAQ section. The css for this has been placed in the head of the page, and that gives some basic style to the definition list. The jQuery has been wrapped in a $(document).ready function so that it can be placed in the head section and won't execute until the page has loaded

I have used mouseenter so that the answer will show on hover, but that can be changed to a click event instead. Speed of the slideUp is set to 200 milliseconds, that can be changed in the script.

I chose to make the container holding the FAQ 300px in width, so it can display on mobile devices without needing to be resized. I could have made that a percentage width instead. For example, if I change 300px to 100%, then the accordion will be full width.

Hello, is this a question?
Yes it is, here is the answer
Hello, is this a question?
Yes it is, here is the answer
Hello, is this a question?
Yes it is, here is the answer
Hello, is this a question?
Yes it is, here is the answer

This goes into the head section.

This is the definition list, in the content of the page.

Comments

Have your say about what you just read! Leave me a comment in the box below.