Requiero su ayuda para saber de que manera puedo pasar de un paso a otro al seleccionar una opción sin necesidad de darle al botón de siguiente.
A continuación les muestro unas imágenes de lo que me refiero.
El código para pasar con el botón "siguiente" es este:
$(document).ready(function() {
var navListItems = $('ul.setup-panel li a'),
allWells = $('.setup-content');
allWells.hide();
navListItems.click(function(e)
{
e.preventDefault();
var $target = $($(this).attr('href')),
$item = $(this).closest('li');
if (!$item.hasClass('disabled')) {
navListItems.closest('li').removeClass('active');
$item.addClass('active');
allWells.hide();
$target.show();
}
});
$('ul.setup-panel li.active a').trigger('click');
// ESTRUCTURA PASO 2//
$('#activate-step-2').on('click', function(e) {
$('ul.setup-panel li:eq(1)').removeClass('disabled');
$('ul.setup-panel li a[href="#step-2"]').trigger('click');
$(this).remove();
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- TAMAÑO PERRO -->
<div class="row">
<div class="col-xs-12">
<div class="col-md-12 well setup-content text-center" id="step-1" style="display: block;">
<h2> ESCOGE SU TAMAÑO</h2>
<div style="text-align: center;" class="form-group">
<div class="cc-selector">
<div class="row">
<div class="col-md-4">
<input checked="checked" id="tamanoperro-0" name="tamanoperro" style="border: none;" type="radio" value="pequeno">
<label class="drinkcard-cc perropequeno" for="tamanoperro-0"></label>
<p class="wow pulse price animated" style="visibility: visible; animation-name: pulse;">0 - 12 Kg</p>
</div>
<div class="col-md-4">
<input id="tamanoperro-1" name="tamanoperro" type="radio" value="mediano">
<label class="drinkcard-cc perromediano" style="height: 160px;" for="tamanoperro-1"></label>
<p class="wow pulse price animated" style="visibility: visible; animation-name: pulse;">12 - 35 Kg</p>
</div>
<div class="col-md-4">
<input id="tamanoperro-2" name="tamanoperro" type="radio" value="grande">
<label class="drinkcard-cc perrogrande" style="height: 200px;" for="tamanoperro-2"></label>
<p class="wow pulse price animated" style="visibility: visible; animation-name: pulse;">35 o más Kg</p>
</div>
</div>
</div>
</div>
<button id="activate-step-2" class="btn btn-primary btn-lg">Siguiente</button>
</div>
</div>
</div>
Quedo atento a sus colaboraciones, dado que no se de que manera lo podría llevar a cabo.
De antemano muchas gracias.