That’s enough to see how everything is structured. ??
So, when the title and image that goes along with it (currently wrapped in an <a>) is clicked, the “hidden” <div> should toggle on and off? Will there be multiple copies of this code on the same page or only one? As I mentioned earlier, you probably want to go with jQuery. Here’s an example that should work with the code you gave:
jQuery( document ) . ready( function( $ ) {
$( '.show' ) . click( function() {
$( this ) . next( '.hidden' ) . slideToggle( 'fast' );
} );
} );
This essentially says, when the page is done loading, if somebody clicks on any element with the class “show”, that the following element with the class “hidden” should be toggled.
You can put that in a separate file, upload it wherever you want (probably in your theme’s folder) then simply include it in whatever page you want it to work on. For example, if you name it author-toggle.js and put it directly in your theme’s folder (wp-content/themes/your-current-theme) then, to include it, you can add something like this to your theme’s functions.php:
add_action( 'wp_enqueue_scripts', 'add_my_js' );
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' );
}
If you wanted to only have the script load on certain pages you can wrap it up in a conditional. For example, if you only wanted it on the page with ID = 7, then:
add_action( 'wp_enqueue_scripts', 'add_my_js' );
function add_my_js() {
if ( is_page( 7 ) ) {
wp_register_script( 'my-author-js', get_template_directory_uri() . '/author-toggle.js', array( 'jquery' ), false, true );
wp_enqueue_script( 'my-author-js' );
}
}
Here are reference pages to some of the things I used in my examples:
Function Reference/wp register script
Function Reference/wp enqueue script
Function Reference/get template directory uri
https://api.jquery.com/slideToggle/
https://api.jquery.com/next/
Of course, if you plan on editing a theme, it’s always a good idea to use a child theme:
Child Themes
If you do use a child theme, my example for functions.php might need a little altering depending on where you upload the JavaScript file.
Also, it was probably just lost in the move to pastebin, but make sure there’s an equals in there:
<a href"#" class"show">
Once you get a working page up I’ll be happy to troubleshoot any problems. I haven’t exactly tested may examples to make sure there aren’t any errors. ??
