Hola como puedo hacer que el alto cambie al darle a mostrar más, pero de forma lenta, no de golpe.
var mostrar = true;
$( "#mostrar" ).click(function() {
if(mostrar==true){
$(".rowSucate").css("height", "100%");
$(".rowSucate").css("transition","1s");
mostrar=false;
}
else
{
$(".rowSucate").css("height", "46px");
$(".rowSucate").css("transition","1s");
mostrar=true;
}
});
.rowSucate {
height: 46px;
overflow: hidden;
}
#mostrar {
color: red;
}
.categorias {
background: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<div class="col-8">
<body style="background:#333">
<h3 style="color:#fff;">Subcategoria <span class="pull-right" id="mostrar">Mostrar más</span></h3>
<div class="dropdown-divider margb4"></div>
<div class="categorias">
<div class="rowSucate">
<div class="row">
<div class="form-check col-6">
<input class="form-check-input pruebas" type="checkbox" name="subcategoria[]" id="subcategorias{{ $sub->id }}" value="{{ $sub->id }}">
<label class="form-check-label" for="subcategorias{{ $sub->id }}">Opcion 1</label>
</div>
</div>
<div class="row">
<div class="form-check col-6">
<input class="form-check-input pruebas" type="checkbox" name="subcategoria[]" id="subcategorias{{ $sub->id }}" value="{{ $sub->id }}">
<label class="form-check-label" for="subcategorias{{ $sub->id }}">Opcion 1</label>
</div>
</div>
<div class="row">
<div class="form-check col-6">
<input class="form-check-input pruebas" type="checkbox" name="subcategoria[]" id="subcategorias{{ $sub->id }}" value="{{ $sub->id }}">
<label class="form-check-label" for="subcategorias{{ $sub->id }}">Opcion 1</label>
</div>
</div>
<div class="row">
<div class="form-check col-6">
<input class="form-check-input pruebas" type="checkbox" name="subcategoria[]" id="subcategorias{{ $sub->id }}" value="{{ $sub->id }}">
<label class="form-check-label" for="subcategorias{{ $sub->id }}">Opcion 1</label>
</div>
</div>
</div>
</div>
</div>
</body>