Trying to create collapsible / expandable divs using jQuery, but it's not working for me at all... Each h3 should expand/collapse the div beneath it, and I'm not sure why this isn't working... Granted, is a heavily nested div, but I thought that the script below would find the uforms class regardless of how much other markup is on the page when it loads and then do what it's supposed to do...
Here's the jquery:
$(document).ready(function () {
$('div.uforms:eq(1)> div:gt(-1)').hide();
$('div.uforms:eq(1)> h3').click(function() {
$(this).next('div:hidden').slideDown('fast').siblings('div:visible').slideUp('fast');
});
});
And, the markup (minus all the stuff that's actually inside the <div></div>, because it's a lot of form stuff...)
<div class="uforms">
<h3>Heading</h3>
<div></div>
<h3>Heading</h3>
<div></div>
<h3>Heading</h3>
<div></div>
</div>
Trying to create collapsible / expandable divs using jQuery, but it's not working for me at all... Each h3 should expand/collapse the div beneath it, and I'm not sure why this isn't working... Granted, is a heavily nested div, but I thought that the script below would find the uforms class regardless of how much other markup is on the page when it loads and then do what it's supposed to do...
Here's the jquery:
$(document).ready(function () {
$('div.uforms:eq(1)> div:gt(-1)').hide();
$('div.uforms:eq(1)> h3').click(function() {
$(this).next('div:hidden').slideDown('fast').siblings('div:visible').slideUp('fast');
});
});
And, the markup (minus all the stuff that's actually inside the <div></div>, because it's a lot of form stuff...)
<div class="uforms">
<h3>Heading</h3>
<div></div>
<h3>Heading</h3>
<div></div>
<h3>Heading</h3>
<div></div>
</div>
- What's the point of :gt(-1) and what are your intentions with :eq(1)? Odd to see that. – Ricky Commented Oct 12, 2009 at 3:52
3 Answers
Reset to default 4You're selectors are just wrong. You don't need eq or gt
$(document).ready(function () {
$('.accordion > div').hide();
$('.accordion> h3').click(function() {
$(this).next('div:hidden').slideDown('fast').siblings('div:visible').slideUp('fast');
});
});
I would change the class identified to something more general so you can reuse this in other places.
<div class="accordion">
<h3>Heading</h3>
<div>cactuspants! <div>I am an inner div</div></div>
<h3>Heading</h3>
<div>Hats</div>
<h3>Heading</h3>
<div>Hi!</div>
</div>
Also, others have suggested that you just use jQueryUI, which is pletely valid, unless you're not already using it or intend to use it for additional features. A s3 line function beats including an addition 32K library (the size of the minimally necessary ponents in a customized build).
I think this is what you are trying to achive
I highly remend the jQueryUI framework.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Accordion - Default functionality</title>
<link rel="stylesheet" href="//code.jquery./ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery./jquery-1.12.4.js"></script>
<script src="https://code.jquery./ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#accordion" ).accordion();
} );
</script>
</head>
<body>
<div id="accordion">
<h3>Section 1</h3>
<div>
<p>
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
</p>
</div>
<h3>Section 2</h3>
<div>
<p>
Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
suscipit faucibus urna.
</p>
</div>
<h3>Section 3</h3>
<div>
<p>
Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
ac tellus pellentesque semper. Sed ac felis. Sed modo, magna quis
lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
<h3>Section 4</h3>
<div>
<p>
Cras dictum. Pellentesque habitant morbi tristique senectus et netus
et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
mauris vel est.
</p>
<p>
Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos himenaeos.
</p>
</div>
</div>
</body>
</html>
I just use the accordion widget with just one div inside.
$("#accordion").accordion({
active: false,
collapsible: true
});
<div id="accordion">
<h3>Section 1</h3>
<div>
<p>test 1 2 3</p>
</div>
</div>
Include this css link:
link rel="stylesheet" href="http://code.jquery./ui/1.10.3/themes/smoothness/jquery-ui.css"