Put this 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');
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
Please provide a link to the page in question
pls move cursor below “My test in WordPress” to see header-text fading in http://current02.uptoconcept.com/?p=4
toggle.js and jquery are not loaded in this page
ah ok … how would I load them ? I didn’t see anything like it in the explanation link of the original demo
Did you add the code posted above in your functions.php
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
Now they both get loaded but toggle.js is not the code I gave you in the link posted above
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 …
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;
}
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
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 <script></script> 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
(usually replace “$” with “jQuery” in the script)
c) yes
d) yes
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 ?
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# (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:
<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 {
color: #6CF;
display: block;
text-decoration: none;
}
h2.trigger a {
display: block;
text-decoration: none;
}
