The result is as follows: When you click a question, the following reply content is displayed.
Copy codeThe Code is as follows: script type = "text/javascript">
Onload = function (){
Faq (document. getElementsByTagName ("dl") [0], "dt", "dd ");
/*
* Faq function: elem is the parent element, qTag is the title element, and aTag is the content element.
*/
}
Function faq (elem, qTag, aTag ){
ATag = aTag | "dd"; // The default value is provided.
QTag = qTag | "dt ";
Elem = elem | document;
Var dds = elem. getElementsByTagName (aTag );
For (var I = 0, len = dds. length; I <len; I ++ ){
Dds [I]. style. display = "none ";
}
Var dts = elem. getElementsByTagName (qTag );
For (var I = 0, len = dts. length; I <len; I ++ ){
Dts [I]. style. cursor = "hand ";
Dts [I]. onclick = function (){
Var next = this. nextSibling;
// Obtain the reference of the next element of the current element
While (next. nodeType! = 1 ){
Next = next. nextSibling;
}
If (next. style. display! = "None "){
Next. style. display = "none ";
}
Else {
Next. style. display = "block ";
}
}
}
}
</Script>
Test code:<Meta http-equiv = "Content-Type" content = "text/html; charset = iso-8859-1 "> <br/> <style type =" text/css "> dd {background: # eee; border: 1px solid # ccc; margin-left: 2px; padding: 4px ;}</style> <dl> <dt> <B> One question: What are ready to do? </B> </dt> <dd> What I want to do is you, do you understand my feeling to you. </p> <p> I hope you are the same to me. </dd> <dt> <B> Two questing: What do you want? </B> </dt> <dd> I want to see you now, I miss you so much, I want to see you at this moment. </dd> <dt> Three question: Do you want to have a girlfriend? </Dt> <dd> I think everyone want it so much, me too, I want to have someone talk to me everyday. </dd> </dl> <p>