I've banged my head all over and none of the solutions seem to make this code work:
$(".showSomething").live('click', function(e) {
e.preventDefault();
var $container = $(this).parent().parent().next("div");
var title = $container.is(':visible') ? "Show" : "Hide" ;
$container.slideToggle('slow');
$(this).text(title);
});
When I click the Show
link on the page, it does indeed change to Hide
but thats it. The div that is supposed to toggle doesn't show and the link also gets locks into that Hide
state.
Any advice would be greatly appreciated.
EDIT This is what the HTML looks like:
<div class="something" id="asdf">
<div class="anotherthing">
<span class="showSomething">Info</span>
</div>
</div>
<div class="details">
This Should Get Shown
</div>
UPDATE : I think there is some genuine issue with IE8 on this. I was able to get it working by switching to the following instead of "slideToggle"
var title = "";
if( $container.is(':visible') )
{
title = "Show";
$container.slideUp('slow');
}
else
{
title = "Hide";
$container.slideDown('slow');
}
I put this fiddle together, seems to work: http://jsfiddle.net/MarkSchultheiss/XdXtr/
Given that, compare your structure to ensure the next div is similar to the example.
<div id='holder'>
<div id='clicker' class="showSomething">click me</div>
</div>
<div id='hidyho'>it is me to hide or not</div>
You're a parent
out, I think. Try:
var $container = $(this).parent().parent().next("div");
The problem was with PIE.htc (css3pie.com). Avoid it like the plague because in addition to the problem I had above, if you apply it to one too many elements, your site will come to a crawl for IE7-8 users rendering it practically useless.
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.