Mostrar ciertos campos al hacer clic en un botón HTML - Calculated Fields Form Wordpress en español

Un usuario preguntó 👇

Creé un campo <ábhar HTML>. En esta área he agregado 3 botones usando


<!DOCTYPE html>
<html>
<head>
<style>
* {
  box-sizing: border-box;
}

.column {
  float: left;
  width: 33%;
  padding: 40px;
}

/* Clearfix (clear floats) */
.row {
  margin: 0;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
}
</style>
</head>
<body>

<h2>Images Side by Side</h2>
<p>How to create side-by-side images with the CSS float property:</p>

<div class="row">
  <div class="column">
    <img src="image_1" style="width:100%">
    <button type="button">6 Lamp T8</button>
  </div>
  <div class="column">
    <img src="image_2" style="width:100%">
    <button type="button">HID</button>
  </div>
  <div class="column">
    <img src="image_3" style="width:100%">
    <button type="button">6 Lamp T5</button>
  </div>
</div>
</body>
</html>

Cada botón tiene una imagen relacionada que debe mostrarse junto al botón en la carga de la página (lo que he hecho). Quiero que se muestren diferentes campos según el botón que se presione. Por ejemplo, todos los campos estarán ocultos hasta que haga clic button 1. Cuando hago esto, quiero mostrar 3 campos desplegables separados (fieldname1, fieldname2, fieldname3) extrae datos de una base de datos, pero si hago clic en button 2, Listas deplegables fieldname4, fieldname5, y fieldname6 mostrar al usuario. Descubrí cómo usar el campo Dropdown DS, pensé que lo mencionaría por temor a que fuera diferente de un drop normal.

¿Se puede hacer esto con este plugin y, de ser así, cómo puedo lograrlo?

Este tema fue modificado hace 2 años, 1 mes por. Este tema fue modificado hace 2 años, 1 mes por.

(@codepeople)

Hace 2 años, 1 mes

Hola @mockapapella,

Otra opcion es:

– Asignar un par de nombres de clase a los dominios que dependen del primer botón: botón-1 ocultar confiar en el tercer botón: botón oculto-3

Tenga en cuenta que los nombres de clase se asignan a los campos por sus atributos: «Agregar palabras clave de diseño CSS», y para asignar varios nombres de clase al mismo campo, debe separar los caracteres en blanco.

Y luego adjunte los siguientes eventos onclick a los botones:

– Al primer botón:


jQuery('.button-1,.button-2,.button-3').addClass('hide');jQuery('.button-1').removeClass('hide');

– al segundo botón:


jQuery('.button-1,.button-2,.button-3').addClass('hide');jQuery('.button-2').removeClass('hide');

– tercer botón:


jQuery('.button-1,.button-2,.button-3').addClass('hide');jQuery('.button-3').removeClass('hide');

y todo eso. Todo lo mejor.

¿Solucionó tu problema??

0 / 0