I've been trying to get this arrow toggle script work on my page. I think i miss something simple but I just don't know what is it. Been spending 2 hrs to figure this out.
The script :
$(document).ready(function(){
$(".accordion h3:first").addClass("active");
$(".accordion a:first").addClass("active");
$(".accordion p:not(:first)").hide();
$(".accordion h3").click(function()
{
$(this).next("p").slideDown("slow")
.siblings("p:visible").slideUp("slow");
});
$(".accordion a").click(function()
{
$(this).css({background:"url(images/arrowdown.gif) bottom right no-repeat"});
$(this).siblings("a").removeClass("active");
});
});
css:
.accordion h3 a {
padding:20px 0 0 190px;
display:block;
background:url(images/arrowup.gif) no-repeat bottom right; }
.accordion h3 a:hover { text-decoration:none; }
.accordion h3 a.active {
background:url(images/arrowdown.gif) no-repeat bottom right; }
Then my HTML :
<div class="accordion">
<h3 id="tab1">
<a href="#">Title 1</a>
</h3>
<p>Description Title 1</p>
<h3 id="tab2">
<a href="#">Title 2</a>
</h3>
<p>Description Title 2</p>
<h3 id="tab3">
<a href="#">Title 3</a>
</h3>
<p>Description Title 3</p>
</div>
So the up & down arrow is INSIDE the "a href" tag and there is a different background image in H3 tag depends on the "tab" ID. I hope that make senses.
Thank you in advance!!
The issue is that siblings
works for elements under the same parent. Your a
links are not under the same parent since each one is wrapped in a h3
.
So I believe this is what you want
$(document).ready(function(){
$(".accordion h3:first").addClass("active");
$(".accordion a:first").addClass("active");
$(".accordion p:not(:first)").hide();
$(".accordion h3").click(function() {
$(this)
.addClass('active') //set the current as active
.siblings("h3") //find sibling h3 elements
.removeClass("active") // and remove the active from them
.end() // return selection to the current element
.next("p") // find the next p
.slideDown("slow") // and show it
.siblings("p:visible") // find the other visible p elements
.slideUp("slow"); // and hide them
$(this)
.find('a') // find a under current element
.addClass('active') // and add active class
.end() // return to current element
.siblings('h3') // find sibling h3 elements
.find('a') // find their a elements
.removeClass('active'); // and remove the active
});
});
Demo at http://jsfiddle.net/gaby/NSvQB/