Show/Hide Not Working

[Learn4Life]

Hi there,

I’m trying to get jQuery show/hide to work. I have multiple instances of the HTML code below on a page. Only the first one is working and I have no idea why. Can someone please help.

CODE:

  <script>
		jQuery( document ).ready( function( $ ) {
			$('.show').click(function() {
			$('.booking-form').toggle("slide");
		  });
		});
  </script>

HTML:

<div class="show align-link link">Display Hidden Content</div>
<div class="booking-form">Content Goes Here</div>

CSS:

.booking-form { display: none; }

Thanks in advance!

[astonecipher]

JQuery is going to the first element with that class and hiding it. If you want a specific element targeted, you want want to use this

$(".booking-form").on("click", function(){
  $(this).toggle();
})

[Learn4Life]

I’m sorry but that did not work. I’m not good with Javascript so not sure if I did it correctly. This is what I added in the file:

 <script>
		jQuery( document ).ready( function( $ ) {
               $(".booking-form").on("click", function(){
               $(this).toggle();
		  });
		});
 </script>

Also, I’m adding this to a Wordpress site, via the functions.php file, so not sure if that makes a difference.

Thanks

[astonecipher]

Why are you putting javascript in the functions.php file? That isn’t where it belongs.

[Learn4Life]

I read it somewhere but I guess I misunderstood what they meant. I’m also learning Wordpress.

I looked it up again and I think I found the better way to do it. I updated the functions.php but not sure if the code is correct. I’m not sure if I should have 2 “functions” in the file.

<?php

function lambert_child_enqueue_styles() {
    $parent_style = 'lambert-theme-style'; // This is 'lambert-style' for the Lambert theme.
    wp_enqueue_style( 
    	$parent_style, 
    	get_template_directory_uri() . '/style.css', 
    	array(
    		'lambert-google-fonts', 
    		'lambert-plugins', 
    	), 
    	null 
    );

    wp_enqueue_style( 'lambert-child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style, 'lambert-responsive' , 'lambert-custom'),
        wp_get_theme()->get('Version')
    );

}
add_action( 'wp_enqueue_scripts', 'lambert_child_enqueue_styles' );


function my_theme_scripts_function() {
	wp_enqueue_script( 'showhide.js', get_stylesheet_directory_uri() . '/js/showhide.js');
}
add_action('wp_enqueue_scripts','my_theme_scripts_function');

Thanks