jquery accordion - keeps hiding parent element?
Posted
by PopRocks4344
on Stack Overflow
See other posts from Stack Overflow
or by PopRocks4344
Published on 2010-05-11T23:12:57Z
Indexed on
2010/05/11
23:24 UTC
Read the original article
Hit count: 202
Well, I fixed my original question by including after the closing tags, but now, those links won't open?
So, basically, in the html below, I'm trying so that only the services section slides open, but I want the h3 tags to open those links...
<div id="sp-accordion">
<h3><a href="/?page_id=3">Home</a></h3><div></div>
<h3><a href="/?page_id=2">About Us</a></h3><div></div>
<h3><a href="#"> Services</a></h3>
<div>
<p><a href="/?page_id=16">S1</a></p>
<p><a href="/?page_id=14">S2</a></p>
<p><a href="/?page_id=20">S3</a></p>
</div>
<h3><a href="/?page_id=9">Contact Us</a></h3><div></div>
<h3><a href="/?page_id=5">Tips</a></h3><div></div>
<h3><a href="/?page_id=108">Jobs</a></h3><div></div>
<h3><a href="/?page_id=131">Newsletter</a></h3><div></div>
</div>
The accordion works, insomuch that when you click on the h3 tag, the container slides open, however, when it slides open, it hides the h3 before it. So, in the html below, when I click on "Services" the div beneath it slides open, but the About Us h3 disappears...
This is the html:
<div id="sp-accordion">
<h3><a href="/?page_id=3">Home</a></h3>
<h3><a href="/?page_id=2">About Us</a></h3>
<h3><a href="#"> Services</a></h3>
<div>
<p><a href="/?page_id=16">S1</a></p>
<p><a href="/?page_id=14">S2</a></p>
<p><a href="/?page_id=20">S3</a></p>
</div>
<h3><a href="/?page_id=9">Contact Us</a></h3>
<h3><a href="/?page_id=5">Tips</a></h3>
<h3><a href="/?page_id=108">Jobs</a></h3>
<h3><a href="/?page_id=131">Newsletter</a></h3>
</div>
I'm using jquery ui, so the jquery is just this:
$(document).ready(function() {
$("#sp-accordion").accordion({autoHeight:false});
});
© Stack Overflow or respective owner