JQuery toggle stops working
I have this JQuery code for a slide panel and I have a toggle() to toggle the image. I am having an isuue of the toggle stops working that switches the image. I can't seem to figure out why, it seems to be random.
Here is the jquery
$(document).ready(function () {
$(".accord_panel").hide(); // Hide all Panels
$(".accord_header").click(function (e) {
$(".accord_panel").stop(true, false).slideUp(); // SlideUp and open panels
$('.accord_header').find('img').attr("src", "http://www.upc.org/images/skin_images/RightArrow.png"); // Change image to RightArrow
$(e.target).closest('.accord_header').next('.accord_panel').stop(true, false).slideToggle(); // SlideToggle panels
});
$(".accord_header").toggle( // Code to toggle arrow images
function (t) {
$(t.target).find('img').attr("src", "http://www.upc.org/images/skin_images/DownArrow.png"); // toggle to DownArrow
}, function (t) {
$(t.target).find('img').attr("src", "http://www.upc.org/images/skin_images/RightArrow.png"); //toggle to RightArrow
});
});
and the css and html
.accord_header
{
margin: 0;
padding: 0;
font-family: 'Helvetica Neue' , Helvetica, Arial, Sans-Serif;
color: #615E5A;
font-size: 9pt;
font-weight: bold;
background-color: black;
cursor: pointer;
width: 300px;
height: 30px;
border-top: white;
}
.accord_panel
{
margin: 0;
padding: 0;
font-family: 'Helvetica Neue' , Helvetica, Arial, Sans-Serif;
color: #615E5A;
font-size: 9pt;
display: none;
background-color: #f3f0ed;
cursor: pointer;
}
<body>
<h2 class="accord_header">
<img src="http://www.upc.org/images/skin_images/RightArrow.png" /><strong>Panel 1</strong>
</h2>
<div class="accord_panel">
<strong><span>Panel 1 This is Panel 1
<br />
<br />
<br />
</span>
<br />
</strong>
</div>
<h2 style="text-align: -webkit-auto;" class="accord_header">
<img src="http://www.upc.org/images/skin_images/RightArrow.png" /><strong>Panel 2</strong>
</h2>
<div class="accord_panel">
<strong><span>This is Panel 2<br />
<br />
<br />
</span>
<br />
</strong>
</div>
<h2 style="text-align: -webkit-auto;" class="accord_header">
<img src="http://www.upc.org/images/skin_images/RightArrow.png" /><strong>Panel 4</strong>
</h2>
<div class="accord_panel">
<strong><span>This is Panel 4<br />
<br />
<br />
</span>
<br />
</strong>
</div>
<h2 style="text-align: -webkit-auto;" class="accord_header">
<img src="http://www.upc.org/images/skin_images/RightArrow.png" /><strong>Panel 5</strong>
</h2>
<div class="accord_panel">
<strong><span>This is Panel 5<br />
<br />
<br />
</span>
<br />
</strong>
</div>
I also put it in jsfiddle here http://jsfiddle.net/kevdog98/WM6x7/
Thanks for the help.
Kevin
Try changing your image toggle to use $(this)
$(".accord_header").toggle(
function(t) {
$(this).find('img').attr("src", "http://www.upc.org/images/skin_images/DownArrow.png");
}, function(t) {
$(this).find('img').attr("src", "http://www.upc.org/images/skin_images/RightArrow.png");
});
When you use this you are referencing the .accord_header clicked. When you use t.target it will be the element you clicked on which actually might be a <span/> or another element which causes your query to find the <img/> to fail.
Update
I believe the root of the problem was with using click and toggle on the same element. The internal tracking of the state of the element was getting out of whack with changing the image.
I reworked your function a bit to simply rely on a click function which seems to produce the functionality you need.
$(".accord_panel").hide(); // Hide all Panels
$(".accord_header").click(function() {
var $header = $(".accord_header");
$header.find("img").attr("src", "http://www.upc.org/images/skin_images/RightArrow.png");
$header.next(".accord_panel").stop().slideUp();
var $panel = $(this).next(".accord_panel");
if ($panel.is(":hidden")) {
$(this).find("img").attr("src", "http://www.upc.org/images/skin_images/DownArrow.png");
}
$panel.stop().slideToggle();
});
Updated fiddle, if this isn't what you are looking for let me know.
加载中,请稍侯......
精彩评论