Title: WordPress / jQuery Last modified: August 20, 2016 --- # WordPress / jQuery * [Frank1100](https://wordpress.org/support/users/frank1100/) * (@frank1100) * [14 years, 6 months ago](https://wordpress.org/support/topic/wordpress-jquery/) * I’m following to insert this fold-open jQuery effect to some posts [http://www.sohtanaka.com/web-design/examples/toggle/](http://www.sohtanaka.com/web-design/examples/toggle/) here is the step by step procedure of it [http://www.sohtanaka.com/web-design/easy-toggle-jquery-tutorial/](http://www.sohtanaka.com/web-design/easy-toggle-jquery-tutorial/) I understand step 1, but it doesn’t say where to paste the function code in step 2 … in the post ior header.php it just creates corresponding text. * Who knows how this works correctly ? * Thx, Frank Viewing 15 replies - 1 through 15 (of 33 total) 1 [2](https://wordpress.org/support/topic/wordpress-jquery/page/2/?output_format=md) [3](https://wordpress.org/support/topic/wordpress-jquery/page/3/?output_format=md) [→](https://wordpress.org/support/topic/wordpress-jquery/page/2/?output_format=md) * Moderator [keesiemeijer](https://wordpress.org/support/users/keesiemeijer/) * (@keesiemeijer) * [14 years, 6 months ago](https://wordpress.org/support/topic/wordpress-jquery/#post-2363643) * Put [this](http://pastebin.com/k1xn5Zb3) jquery code in a file and call it “toggle. js” Put this file in a folder in your theme called “js” Add this to your theme’s functions.php: * ``` 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'); ``` * Thread Starter [Frank1100](https://wordpress.org/support/users/frank1100/) * (@frank1100) * [14 years, 6 months ago](https://wordpress.org/support/topic/wordpress-jquery/#post-2363692) * thx, ya I did create a toggle.js in my default themes js folder and copied the linked code to it. I also copied the function in the functions.php of the theme appropriately (no errors in dreamweaver). The necessary html for the effect is in the post as well the necessary css is added to the core.css file of my theme. * But it’s acting wired … only the header text of the corresponding section of my post fades in on hover … but it does not fold open the more-content. * ? * Th, Frank * Moderator [keesiemeijer](https://wordpress.org/support/users/keesiemeijer/) * (@keesiemeijer) * [14 years, 6 months ago](https://wordpress.org/support/topic/wordpress-jquery/#post-2363698) * Please provide a link to the page in question * Thread Starter [Frank1100](https://wordpress.org/support/users/frank1100/) * (@frank1100) * [14 years, 6 months ago](https://wordpress.org/support/topic/wordpress-jquery/#post-2363729) * pls move cursor below “My test in WordPress” to see header-text fading in [http://current02.uptoconcept.com/?p=4](http://current02.uptoconcept.com/?p=4) * Moderator [keesiemeijer](https://wordpress.org/support/users/keesiemeijer/) * (@keesiemeijer) * [14 years, 6 months ago](https://wordpress.org/support/topic/wordpress-jquery/#post-2363737) * toggle.js and jquery are not loaded in this page * Thread Starter [Frank1100](https://wordpress.org/support/users/frank1100/) * (@frank1100) * [14 years, 6 months ago](https://wordpress.org/support/topic/wordpress-jquery/#post-2363760) * ah ok … how would I load them ? I didn’t see anything like it in the explanation link of the original demo * Moderator [keesiemeijer](https://wordpress.org/support/users/keesiemeijer/) * (@keesiemeijer) * [14 years, 6 months ago](https://wordpress.org/support/topic/wordpress-jquery/#post-2363768) * Did you add the code posted above in your functions.php * Thread Starter [Frank1100](https://wordpress.org/support/users/frank1100/) * (@frank1100) * [14 years, 6 months ago](https://wordpress.org/support/topic/wordpress-jquery/#post-2363775) * argh … I was reproducing on simple project and forgot this point … did now but still same. Not coming yet as in original demo. * here’s my function php, I’ve put it at the end of file [http://bin.cakephp.org/view/1219730144](http://bin.cakephp.org/view/1219730144) * Moderator [keesiemeijer](https://wordpress.org/support/users/keesiemeijer/) * (@keesiemeijer) * [14 years, 6 months ago](https://wordpress.org/support/topic/wordpress-jquery/#post-2363781) * Now they both get loaded but toggle.js is not the code I gave you in the link posted above * Thread Starter [Frank1100](https://wordpress.org/support/users/frank1100/) * (@frank1100) * [14 years, 6 months ago](https://wordpress.org/support/topic/wordpress-jquery/#post-2363785) * whow great ! now working , sorry I don’t know why I’ve saved it with the other code. * The header text still fades in / out on hover instead of using a + / – sign and staying text like in the original demo … * Moderator [keesiemeijer](https://wordpress.org/support/users/keesiemeijer/) * (@keesiemeijer) * [14 years, 6 months ago](https://wordpress.org/support/topic/wordpress-jquery/#post-2363790) * in your themes stylesheet style.css change this: * ``` h2.trigger a { color: #FFFFFF; display: block; text-decoration: none; } ``` * to this: * ``` h2.trigger a { display: block; text-decoration: none; } ``` * Thread Starter [Frank1100](https://wordpress.org/support/users/frank1100/) * (@frank1100) * [14 years, 6 months ago](https://wordpress.org/support/topic/wordpress-jquery/#post-2363793) * gotit … thx for leading through keesiemeijer ya de best 🙂 * Just for understanding the principle of it and for peeps who diggin’ on the same: * a) putting a function call inside the functions.php of the theme b) saving the jQuery function as an own file example.js under the themes js folder c) adding css to themes .css file d) adding html to post or page * pls correc me if wrong * Moderator [keesiemeijer](https://wordpress.org/support/users/keesiemeijer/) * (@keesiemeijer) * [14 years, 6 months ago](https://wordpress.org/support/topic/wordpress-jquery/#post-2363798) * a) when using a script that requires another JavaScript file shipped with WordPress( jQuery) always use wp_enqueue_script. This Basically does include your script and the script it depends on (jQuery) if it hasn’t already been included. b) You could also just insert the script between tags in the < head> section ( just after `wp_head()` )but be aware that The jQuery library included with WordPress loads in “no conflict” mode: [http://codex.wordpress.org/Function_Reference/wp_enqueue_script#jQuery_noConflict_wrappers](http://codex.wordpress.org/Function_Reference/wp_enqueue_script#jQuery_noConflict_wrappers)( usually replace “$” with “jQuery” in the script) c) yes d) yes * Thread Starter [Frank1100](https://wordpress.org/support/users/frank1100/) * (@frank1100) * [14 years, 6 months ago](https://wordpress.org/support/topic/wordpress-jquery/#post-2363831) * some questions: a) you mean jQuery effekts seen on example pages sometimes can call jQuery includes already on board with wordpress and sometimes not ? * a) what and where is the wp_enqueue_script and what do I do with it ? Do I use existing functions there or do I add functions in there ? * b) if I insert stuff in the header then it is available on every page of the site … thus maybe not be necessary on every page. Which is probably ok if its only a few, but can get heavy if it’s a lot of different jQuery I want to use over different pages … is that right ? * b) can I make using a function page based versus site based ? * Thread Starter [Frank1100](https://wordpress.org/support/users/frank1100/) * (@frank1100) * [14 years, 6 months ago](https://wordpress.org/support/topic/wordpress-jquery/#post-2363934) * Hi keesiemeijer, what was working on the test page does not work in the final page any more. I have done and re-done all steps several times, but it wouldn’t toggle. * Any idea what I should check ? I’m with my back to the wall. * [http://current01.uptoconcept.com/toggle-test#](http://current01.uptoconcept.com/toggle-test#)( access with: admin xxxyyy) * 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:

[Toggle Header](https://wordpress.org/support/topic/wordpress-jquery/?output_format=md#)

Content Header Content Content Content lalala

* **My CSS:** * h2.trigger a { color: #6CF; display: block; text-decoration: none; } * h2.trigger a { display: block; text-decoration: none; } Viewing 15 replies - 1 through 15 (of 33 total) 1 [2](https://wordpress.org/support/topic/wordpress-jquery/page/2/?output_format=md) [3](https://wordpress.org/support/topic/wordpress-jquery/page/3/?output_format=md) [→](https://wordpress.org/support/topic/wordpress-jquery/page/2/?output_format=md) The topic ‘WordPress / jQuery’ is closed to new replies. ## Tags * [jquery](https://wordpress.org/support/topic-tag/jquery/) * [toggle](https://wordpress.org/support/topic-tag/toggle/) * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/) * 33 replies * 2 participants * Last reply from: [Frank1100](https://wordpress.org/support/users/frank1100/) * Last activity: [14 years, 6 months ago](https://wordpress.org/support/topic/wordpress-jquery/page/3/#post-2363960) * Status: not resolved ## Topics ### Topics with no replies ### Non-support topics ### Resolved topics ### Unresolved topics ### All topics