1

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>

1 respuesta 1

0

Puedes utilizar la función animate() de JQuery, estableciendo la duración de la animación. Además, no utilices porcentajes para indicar el height, ya que eso puede dar lugar a problemas. Por eso lo cambié a 100px.

var mostrar = true;

$( "#mostrar" ).click(function() {
  if(mostrar==true){
    $(".rowSucate").animate({height: "100px"},'slow');
    mostrar=false;
  }
  else
  {
    $(".rowSucate").animate({height: "46px"}, 'slow');
    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>

4
  • Hola y gracias por tu respuesta, pero esque necesito que saque el 100% del div, ya que es dinamico y puede crecer según tenga más registros
    – Miguel
    Commented el 28 sept. 2020 a las 20:24
  • Mira la respuesta @kalia
    – Miguel
    Commented el 28 sept. 2020 a las 20:34
  • Entiendo... Podrías intentar esta solución: stackoverflow.com/questions/15393766/…
    – kalia
    Commented el 28 sept. 2020 a las 20:56
  • Hola @kalia funciono perfecto lo del foro, si modificas la respuesta por la que he puesto la marco como buena, gracias por tu atención
    – Miguel
    Commented el 29 sept. 2020 a las 10:23

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.