Mostrar / Ocultar tabla

votos
0

He añadido una tabla de información nutricional para el fondo de mi descripción del producto Wordpress / Woocommrece.

Estoy tratando de tenerlo oculto y dar al cliente la opción de mostrar la tabla.

Actualmente soy capaz de ocultar y revelar la información que llega es decir antes de la mesa - 300 g, 10 porciones ... pero la mesa es siempre visible.

Mi código:

.nutrition-read-more-state {
    display: none;
}
.nutrition-read-more-target {
    opacity: 0;
    max-height: 0;
    font-size: 0;
    transition: .25s ease;
}
.nutrition-read-more-state:checked ~ .nutrition-read-more-wrap .nutrition-read-more-target {
    opacity: 1;
    font-size: inherit;
    max-height: 999em;
}
.nutrition-read-more-state ~ .nutrition-read-more-trigger:before {
    content: 'Show more';
}
.nutrition-read-more-state:checked ~ .nutrition-read-more-trigger:before {
    content: 'Show less';
} 
.nutrition-read-more-trigger {
    cursor: pointer;
    display: inline-block;
    padding: 0 .5em;
    color: #666;
    font-size: .9em;
    line-height: 2;
    border: 1px solid #ddd;
    border-radius: .25em;
}
<div><input id=post-2 class=nutrition-read-more-state type=checkbox />
<div class=nutrition-read-more-wrap>
<h2>Brand - Product - Product type - Nutrition Information</h2>
<span class=nutrition-read-more-target>
Size: 300g
Serving size: 10g
Servings per container: 30</p>
<table class=tg style=width: 30%;>
<tbody>
<tr>
<th class=tg-yw4l></th>
<th class=tg-baqh>Per Serving</th>
<th class=tg-baqh>% of RI</th>
</tr>
<tr>
<td class=tg-bd4c colspan=3>sub-head</td>
</tr>
<tr>
<td class=tg-yw4l>
<div style=color: #3b3d3e;>ingredient</div></td>
<td class=tg-baqh>2.5g</td>
<td class=tg-baqh></td>
</tr>
<tr>
<td class=tg-siak>ingredient</td>
<td class=tg-om3m>2g</td>
<td class=tg-om3m></td>
</tr>
<tr>
<td class=tg-yw4l>ingredient</td>
<td class=tg-baqh>2g</td>
<td class=tg-baqh></td>
</tr>
<tr>
<td class=tg-siak>ingredient</td>
<td class=tg-om3m>120mg</td>
<td class=tg-om3m>15%</td>
</tr>
<tr>
<td class=tg-yw4l>ingredient</td>
<td class=tg-baqh>60mg</td>
<td class=tg-baqh>16%</td>
</tr>
<tr>
<td class=tg-bd4c colspan=3>Sub head</td>
</tr>
<tr>
<td class=tg-yw4l>ingredient</td>
<td class=tg-baqh> 500mg</td>
<td class=tg-baqh></td>
</tr>
<tr>
<td class=tg-siak>ingredient</td>
<td class=tg-om3m> 300mg</td>
<td class=tg-om3m></td>
</tr>
<tr>
<td class=tg-yw4l>Caffeine</td>
<td class=tg-baqh> 200mg</td>
<td class=tg-baqh></td>
</tr>
<tr>
<td class=tg-siak>ingredient</td>
<td class=tg-om3m> 200mg</td>
<td class=tg-om3m></td>
</tr>
<tr>
<td class=tg-bd4c colspan=3>ingredient</td>
</tr>
<tr>
<td class=tg-siak>ingredient</td>
<td class=tg-om3m> 2.2mg</td>
<td class=tg-om3m> 200</td>
</tr>
<tr>
<td class=tg-yw4l>ingredient</td>
<td class=tg-baqh> 2.8mg</td>
<td class=tg-baqh> 200</td>
</tr>
<tr>
<td class=tg-siak>ingredient</td>
<td class=tg-om3m> 48mg</td>
<td class=tg-om3m> 300</td>
</tr>
<tr>
<td class=tg-yw4l>ingredient</td>
<td class=tg-baqh> 12mg</td>
<td class=tg-baqh> 200</td>
</tr>
<tr>
<td class=tg-le8v colspan=3>
<div style=color: #3b3d3e;><span style=font-weight: bold; color: #000000;>Other Ingredients</span></div>
<div style=color: #3b3d3e;><span style=color: #000000;>Beta-Alanine, Creatine Monohydrate, L-Arginine, Citric Acid (Acidity Regulator), L-Tyrosine, Minerals (Tricalcium Phosphate, Magnesium Carbonate), Extract of Bitter Orange Fruit (Citrus Aurantium), Flavour, Caffeine Raspberry Ketone, Silicone Dioxide (Anti-Caking Agent), Vitamins (Thiamine Mononitrate, Riboflavin, Nicotinic Acid, Calcium Pantothenate, Pyridoxine Hydrochloride, D-Biotin, Folic Acid, Cyanocobalamin), Acesulfame K &amp; Sucralose (Sweeteners), Cochineal &amp; Brilliand Blue (Colourants)</span></div>
<div style=color: #3b3d3e;><span style=font-weight: bold; color: #000000;> </span></div>
<div style=color: #3b3d3e;><span style=font-weight: bold; color: #000000;>Recommended Use</span></div>
<div style=color: #3b3d3e;><span style=color: #000000;>One serving (10g - 2 teaspoons) dissolved in 200 ml of water Use once a day before training</span></div>
<div style=color: #3b3d3e;><span style=color: #000000;> </span></div>
<div style=color: #3b3d3e;><span style=font-weight: bold; color: #000000;>Warning</span></div>
<div style=color: #3b3d3e;><span style=color: #000000;>Do not exceed recommended servings for consumption during the day Food supplements should not be used as a substitute for a varied diet Contains caffeine is not recommended for use in children and pregnant women</span></div></td>
</tr>
</tbody>
</table>
</span>
</div>
<label class=nutrition-read-more-trigger for=post-2></label></div>

El fragmento de código funciona bien aquí y en la pluma de código, pero no en mi sitio web. cualquier ayuda sería grande. Estoy tratando de mantenerlo a CSS sólo como Encuentro sitios web wordpress sobrecargarse con Javascript de plugins que tiende a reducir la velocidad

Publicado el 20/10/2018 a las 10:49
fuente por usuario
En otros idiomas...                            


1 respuestas

votos
0

  • CSS no puede manejar clics. Usted tiene que utilizar JavaScript.
  • Seguir este tutorial para esta cuenta: https://www.w3schools.com/howto/howto_js_toggle_hide_show.asp
  • Las entradas son para las formas, no los utilice para los estados de interfaz de usuario.
  • Coloque la secuencia de comandos en un script etiqueta o en un archivo, después de que el HTML.
  • Mira el código en su proyecto y buscar conflics JavaScript en la consola de crhome inspector
Respondida el 20/10/2018 a las 11:17
fuente por usuario

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more