Frank1100Hi, I ran into the problem that a jQuery toggle-fade effect is working on a test site of mine but when I insert the codes into my final site then by clicking the toggle link, the page just jumps to the top instead ... have checked it back an forth but no luck yet.
Seems that the theme I have on my final site makes a problem. is there a way to identify where the conflict happens and make a little fix around ?
This is the code I use :
My toggle.js:
jQuery(document).ready(function(){
//Hide (Collapse) the toggle containers on load
jQuery(".toggle_container").hide();
//Switch the "Open" and "Close" state per click then slide up/down (depending on open/close state)
jQuery("h2.trigger").click(function(){
jQuery(this).toggleClass("active").next().slideToggle("slow");
return false; //Prevent the browser jump to the link anchor
});
});
My function.php insert:
/* fh start : jQuery Toggle */
function my_scripts_method() {
// register your script location, dependencies and version
wp_register_script('toggle_script',
get_template_directory_uri() . '/js/toggle.js',
array('jquery'),
'1.0' );
// enqueue the script
wp_enqueue_script('toggle_script');
}
add_action('wp_enqueue_scripts', 'my_scripts_method');
/* fh end : jQuery Toggle */
My HTML:
My test in WordPress:
<h2 class="trigger">Toggle Header</h2>
<div class="toggle_container">
<div class="block">
<h3>Content Header</h3>
Content Content Content lalala
</div>
</div>
My CSS:
h2.trigger a {
display: block;
text-decoration: none;
}
Any hint very appreciated.
Regards,
Frank
keesiemeijer