This is a very simple jQuery example which shows a HTML defintion list being hidden and shown when clicking on a parent branch.
Although this is a very basic example of jQuery in action, it does show the ability to separate Javascript actions and your HTML.
This code assumes you have the jQuery library in the same folder as your html.
You can also find an alternative Defintion list menu action on this demo page, as well as this screencast.
// is document ready? $(document).ready(function() {
// hide all DD automatically $('#faq').find('dd').hide();
// if dt clicked then slide up or down. $('#faq').find('dt').click(function() { answer = $(this).next();
if (answer.is(':visible')) { answer.slideUp(); } else { answer.slideDown(); }; });
});
FAQ
- block-level elements
-
in html, block-level elements may generally contain
inline elements and other block-level elements. they are
usually formatted differently than inline elements,
typically on a new line in visual browsers. - inline elements
- text-level elements
-
inline (or text-level) elements generally only contain
character data and other inline elements.
- Coffee
- Black hot drink
- Milk
- White cold drink