Mostrar / Ocultar DIv no funciona

Un usuario preguntó 👇

Hola,

Cuando hago clic en el botón «Reserve su reserva», me gustaría ver el contenido en el DIV a continuación.

Pongo esto en la página:

<div id="show" class="align-link link">Book Your Reservation</div>
<div id="book-form" style="display: none;">
Booking form here...
</div>

Pongo esto en functions.php

function wpb_hook_javascript() {
    ?>
      <script>
		$(document).ready(function(){
			$('#show').click(function() {
			$('#book-form').toggle("slide");
		  });
		});
      </script>
    <?php
}
add_action('wp_head', 'wpb_hook_javascript');

No se muestra el contenido. Supongo que javascript no funciona, pero no estoy seguro de por qué.

¡Gracias!

Este tema fue modificado hace 11 meses, hace una semana por. Motivo: movido para configurar WordPress, este no es contenido de WordPress Todo lo demás

(@sterndata)

Moderador del foro y voluntario del equipo de apoyo

Hace 11 meses, 1 semana

Cambiar el primero $(document) a jQuery(document). El jq que se inicia con WordPress funciona en modo sin conflicto.

Además, ponga en cola el script y asegúrese de que se base en ‘jquery’.

https://digwp.com/2011/09/using-instead-of-jquery-in-wordpress/
https://developer.wordpress.org/reference/functions/wp_enqueue_script/

(@myworldz)

hace 11 meses

Muchas gracias. Lo encontré funcionando, excepto que corrí con otra edición y esperaba un poco más de ayuda.

Tengo numerosas instancias del código HTML a continuación en la página (aproximadamente 4). Solo el primero funciona, asumí que es por el ID = «show» así que lo cambié a CLASS = «show», actualicé el script para que coincida, pero todavía no funciona.

Me preguntaba cómo editar el script para que funcione con el ID o alguna idea de por qué la clase no funciona. Básicamente estoy buscando ayuda para que esto funcione.

¡Gracias! Respételo.

(@myworldz)

hace 11 meses

Intenté lo siguiente, pero solo puedo encontrar un formulario para mostrar en la página. ¿Debería mover el guión a otro lugar tal vez? Está en el archivo functions.php.

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

HTML

<div class="show align-link link">Book Your Reservation</div>
<div class="booking-form">
[booking-form]
</div>

CSS
.booking-form { display: none; }

No veo por qué no funciona 🙁

Esta respuesta fue modificada hace 11 meses por.

¿Solucionó tu problema??

SíNo

0 / 0