Expand/collapse FAQ with jquery
Question
i've been searching expand/collapse menu script (becouse i can do only "expand" without colapse so far) and found one that interests me. Here's a link
Still, when i used it with jQuery i've seen only text [so far]( http://scr.hu/0z5b/iajxi )
When i used other script, it worked (but it still does not include collapsing in FAQ).
Can any one help me me?
Ofc script
<dl> <dt>Question One</dt> <dd>first answer to question one</dd> <dd>second answer to question one</dd> <dt>Question two</dt> <dd>first answer to question two</dd> <dd>second answer to question two</dd> <dt>Question three</dt> <dd>first answer to question three</dd> <dd>second answer to question three</dd> </dl>
And so far jquery:
<script>
$('dd').hide();$('dt').click(
function() {
var toggle = $(this).nextUntil('dt');
toggle.slideToggle();
$('dd').not(toggle).slideUp();
});
</script>
2 answers
solution1
3 2014-06-24 12:11:59
here is the code which works
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
$('dd').hide();
$('dt').click(function() {
var toggle = $(this).nextUntil('dt');
toggle.slideToggle();
$('dd').not(toggle).slideUp();
});
});
</script>
<dl>
<dt>Question One</dt>
<dd>first answer to question one</dd>
<dd>second answer to question one</dd>
<dt>Question two</dt>
<dd>first answer to question two</dd>
<dd>second answer to question two</dd>
<dt>Question three</dt>
<dd>first answer to question three</dd>
<dd>second answer to question three</dd>
</dl>
nothing to do special, if not work update your browser as well.
solution2
0 ACCPTED 2014-06-24 12:01:43
Refer this site . Same functionality can be achived using jqueryUI accordion.
http://api.jqueryui.com/accordion/
Edited file
<!DOCTYPE html>
<head>
<title>Title</title>
<script src="js/jquery.min.js"></script>
<script>
$("document").ready(function()
{
$('dd').hide();
$('dt').click(function()
{
var toggle = $(this).nextUntil('dt');
toggle.slideToggle();
$('dd').not(toggle).slideUp();
});
});
</script>
</head>
<body>
<dl>
<dt>Question One</dt>
<dd>first answer to question one</dd>
<dd>second answer to question one</dd>
<dt>Question two</dt>
<dd>first answer to question two</dd>
<dd>second answer to question two</dd>
<dt>Question three</dt>
<dd>first answer to question three</dd>
<dd>second answer to question three</dd>
</dl>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.