$(document).ready(function(){
$('.hidden').hide();
$('a').click(function(){
$('.hidden').show('slow');
$('a.close').click(function(){
$('.hidden').hide('slow');
})
});
});
Alright we are making headway here. I have got the code working with this
$(document).ready(function(){
$('.hidden').hide();
$('a').click(function(){
$( this ).next('.hidden').show('fast');
$('a.close').click(function(){
$('.hidden').hide('fast');
})
});
});
It allow only the one div to be opened. Now just have to get it opening div and if another is open close it.
The error I pointed out earlier is still there:
<a href="#" class"show">
Of course, should be:
<a href="#" class="show">
That alone would cause the jQuery example I gave to not work. 🙂
You currently have this in your <head>:
<script type='text/javascript' src='http://scottcarltonblog.net/author-toggle.js'></script>
However, there’s no file at that location and it appears to be directly added to your theme’s header.php rather than included the proper way with wp_register_script and wp_enqueue_script in your theme’s functions.php. Did you already remove that code?
You current jQuery is targeting all <a> tags which is probably not what you want. Did you want two separate buttons for opening and closing (like you have now) instead of a single button that toggles (like your example link)?
Forcing only one div open at a time isn’t too hard but before I recommend anything it would best to finalize this part.
Ya, I removed the script from the header. had the script run in the page just to get it working. Can’t get the function.php to work with
function add_my_js() {
wp_register_script( 'my-author-js', get_template_directory_uri() . '/author-toggle.js', array( 'jquery' ), false, true );
wp_enqueue_script( 'my-author-js' );
}
the file is under wp-content/theme/my-theme
Once I remove the code from the page directly and place the code back in the js file with the add_my_js in function.php it doesn’t work. Would like to put the file in my js folder under wp-content/theme/my-theme/js
I have been building this theme from scratch. Here is my function.php
Fixed the class issue and set “a” to .show instead. Then set jquery .show back to .slideToggle
Now just need to get the function working through function.php
The external JavaScript file is currently being added correctly to every page but this one. If you check your site’s footer on any other page:
<script type='text/javascript' src='http://scottcarltonblog.net/wp-content/themes/BLANK-Theme/author-toggle.js?ver=3.2.1'></script>
Is the “our-team” page using a custom template? It seems to be missing the footer: get_footer();
If you want to move the file here: wp-content/theme/BLANK-Theme/js/author-toggle.js
Then you just need to alter the second argument of wp_register_script:
add_action( 'wp_enqueue_scripts', 'add_my_js' );
function add_my_js() {
wp_register_script( 'my-author-js', get_template_directory_uri() . '/js/author-toggle.js', array( 'jquery' ), false, true );
wp_enqueue_script( 'my-author-js' );
}
And, if you want to have it only load on this one page, you can do this:
add_action( 'wp_enqueue_scripts', 'add_my_js' );
function add_my_js() {
if ( is_page( 8 ) ) {
wp_register_script( 'my-author-js', get_template_directory_uri() . '/js/author-toggle.js', array( 'jquery' ), false, true );
wp_enqueue_script( 'my-author-js' );
}
}
forgot about that. Fixed it and now works. Almost there now. Just have to get it to close div if another div is clicked to open and get the footer to move down when open.
Thanks again for all your help!
got the toggle working the way I wanted it to with the code bellow.
$(document).ready(function() {
$('.bio-block').hide();
$('.show').click(function(event){
event.preventDefault();
var sliderContent = $(this).next('.bio-block');
$('.bio-block').not(sliderContent).hide();
sliderContent.toggle();
});
$('.close').click(function(){
$(this).parent().hide();
});
});
Big Bagel, I wanted to thank you for all your help and teaching me some great stuff along the way! Thanks again!
This is a great thread. I’ve been dealing with this issue. I’m not as well versed in jquery as I should be. Anyway either of you could help me out in adding this function to my site?
Not prob. As soon as I get home I’ll send you a link to the code I used. Hope it will help.
Here is the link to the code that I use. Though probably not as clean as it should be, it did the job that I need. If you need any other help let us know. Good Luck.
http://jsfiddle.net/fFhW7/43/
Thanks! I’m trying to use this inside a loop, will try and let you know how it works out.
11 months ago a discussion occurred, 5 posts added in a few hours (again, almost a YEAR later)- goodness for tracking…
