<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="col-md-8"> <div class="card"> <div class="card-header">Titulo</div> <div class="card-block"> <form> <div class="form-group"> <div class="row"> <div class="col-md-8"> <label>Titulo</label> <input type="text" class="form-control"> </div> </div> </div> <div class="form-group"> <div class="row"> <div class="col-md-8"> <label>Description</label> <textarea class="form-control" rows="5"></textarea> </div> </div> </div> <div class="form-group"> <div class="row"> <div class="col-md-2"> <label>label</label> <select class="form-control"> <option selected>option 1</option> <option>option 2</option> </select> </div> <div class="col-md-2"> <label>label</label> <select class="form-control"> <option selected>option 1</soption> <option>option 2</option> </select> </div> <div class="col-md-2"> <label>label</label> <select class="form-control"> <option selected>Option 1</option> <option>Option 2</option> </select> </div> </div> </div> </form> </div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>

$(".card-block").hide(); $(".card-header").click(function (e) { $(this).next(".card-block").slideToggle("normal"); });