• Resolved Frank1100

    (@frank1100)


    Hi, 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

Viewing 1 replies (of 1 total)
Viewing 1 replies (of 1 total)

The topic ‘jQuery in WordPress Theme Problem ?’ is closed to new replies.