Exercise (03)

Make the displayed definition list more readable! To accomplish this, hide the <dd> elements by default and only make them visible, when the associated <dt> element gets clicked. Additionally change the css class of the <dt> elements to "clickable" to make them appear as regular links.

HTML

<h3>Bird FAQ - click the questions to show the answers</h3>
    <dl id="faq">
        <dt>What shouldn't I do to the bird?</dt>
        <dd>
            Never use oils or lotions which contain oils on your bird. They gunk up the feathers,
            and ruin their insulating properties. This means a chilled bird. Never wait out a cat bite--those
            require immediate veterinary attention--a bird can die within two days because a cat's mouth is so
            filthy and full of bacteria. Don't bother with over-the-counter medication. It really doesn't work,
            and in some cases, may upset the delicate bacterial balance in the bird's body, or even worsen the
            situation. Never try to treat a fracture at home.
        </dd>

        <dt>My bird is healthy. I don't need to go to a vet, do I?</dt>
        <dd>
            Schedule a "well-bird" checkup. Prevention is the best medicine. Even though the bird might
            appear outwardly healthy, it may have a low-grade infection or something not so readily
            apparent. Your bird's health and your peace of mind will be worth it.
        </dd>

        <dt>My bird's leg is being rubbed raw by the leg band. Can I take it off?</dt>
        <dd>
            No. Don't attempt this, especially if the leg is broken or swollen. The vet will be able
            to remove the band, and deal with whatever injury maybe lurking under the banded area.
        </dd>

        <dt>How do I pull a broken blood feather?</dt>
        <dd>
            This is probably the most common mishap. The remedy is simple--yank! It's most easily done
            with two people. One to restrain the bird and the other to pull the feather. Use pliers, or a
            hemostat. Tweezers won't work on primaries. Make certain that the wing bones are firmly supported
            or you can break the wing. Clamp onto the feather and give a sharp tug in the direction of the
            feather. The feather will come...

CSS

h3 {
    margin: 8px 0;
    font-family: sans-serif;
    text-decoration: underline;
}

dl {
    font-family: sans-serif;
    font-size: 10pt;
}

dt {
    font-weight: bold;
}

dd {
    margin-left: 5px;
}

.clickable {
    cursor: pointer;
    text-decoration: underline;
}

JavaScript

$(document).ready(function () {
    
    $('dd').hide();
    
    $('dt').click(
        function(event)
        { $(event.target).next().toggle();
        }
    );
    
});