JSFiddle - React, Tailwind, and code Playground

by Reinventatuweb

HTML

<input type="checkbox" class="check-p-a" id="check-p-a"/>
<label for="check-p-a">
Jugos adicionales
</label>

<div class="productos-adicionales">

	<div class="p-a-producto">
		<div class="p-a-titulo">Manzana: </div>
		<div>[mostrar_producto_cantidad id="1133" show_price="true"]</div>
	</div>
	<div class="p-a-producto">
		<div class="p-a-titulo">Piña: </div>
		<div>[mostrar_producto_cantidad id="1137" show_price="true"]</div>
	</div>
	<div class="p-a-producto">
		<div class="p-a-titulo">Naranja: </div>
		<div>[mostrar_producto_cantidad id="1136" show_price="true"]</div>
	</div>
	<div class="p-a-producto">
		<div class="p-a-titulo">Durazno: </div>
		<div>[mostrar_producto_cantidad id="1135" show_price="true"]</div>
	</div>

</div>

JavaScript

$('.check-p-a').change(function() {
	    if ($(this).is(':checked')) {
	      $(this).siblings('.productos-adicionales').show();
	    } else {
	      $(this).siblings('.productos-adicionales').hide();
	    }
  	});
    
   $('.check-p-a').siblings('.productos-adicionales').show();