referencing DD element in CSS

Hello and thank you for any attention to my question. I'm working with an html document that has a datalist set that I want to be able to hide and unhide the <DD> elements as I click the <DT> element ("Blah"). I believe my problem is that I'm not referencing the <DD> element properly in my CSS. Below is what I have...ideas?



<STYLE>
BODY { font-size:95%; font-family:arial; }
DL { cursor: hand; }
DD { display: none;font: 90%;list-style: square; }
.showList DD { display: block; }
.defaultStyles DD { display: none; }
</STYLE>



<DL>
<DT onclick="this.className='showlist';" ondblclick="this.className='defaultStyles';">BlahBlah
<DD>Blah 1
<DD>Blah 2
<DD>Blah 3
</DL>

dd is not a child of dt, yet that's how you've referenced it.
Maybe try moving the onclick to the dl?

That was it. Thanks!