problem with transition

<!DOCTYPE html>
<html>
<head>
	<title>fuck yeah!</title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>

<header class="topContainer" style="top:0px; position:relative;"></header>
<div class="container-fluid">
	<div class="row">
		<div class="col-md-4"></div>
		<div class="col-md-4"></div>
		<div class="col-md-4"></div>
		<div class="col-md-4"></div>
		<div class="col-md-4"></div>
		<div class="col-md-4"></div>
	</div>
</div>

<div class="container-fluid" >
	<div class="row">
		<div class="collapse-content">
		<div class="col-md-4"></div>
		<div class="col-md-4"></div>
		<div class="col-md-4"></div>
		<div class="col-md-4"></div>
		<div class="col-md-4"></div>
		<div class="col-md-4"></div>
		<div class="col-md-4"></div>
		<div class="col-md-4"></div>
		<div class="col-md-4"></div>
		</div>
		<button class="showBtn">Show more</button>
	</div>
</div>

<div class="container-fluid">
	<div class="row">
		<div class="col-md-12" style="

background: #3a6186; /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #3a6186 , #89253e); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #3a6186 , #89253e); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */height: 500px; z-index:0;"></div>
	</div>
</div>


<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.js"
  integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30="
  crossorigin="anonymous">
  </script>


 <script type="text/javascript" src="app.js"></script>
 </body>
</html>


*{
	padding: 0px;
	margin: 0px;
	box-sizing: border-box;
}

html, body{
	padding: 0px;
	margin: 0px;
}

.container-fuid{
	min-width: 100%;

}

.col-md-4{
	width: 100%;
	height: 250px;
	background-color: gray;
	border: 1px solid black;
-webkit-transition: 0.75s linear;
   -moz-transition: 0.75s linear;
    -ms-transition: 0.75s linear;
     -o-transition: 0.75s linear;
        transition: 0.75s linear;


}

.collapse-content{
	overflow: hidden;
	height: 0px;
-webkit-transition: 0.75s linear;
   -moz-transition: 0.75s linear;
    -ms-transition: 0.75s linear;
     -o-transition: 0.75s linear;
        transition: 0.75s linear;


}

.active-collapse{
height: auto;
overflow: visible;
-webkit-transition: 0.75s linear;
   -moz-transition: 0.75s linear;
    -ms-transition: 0.75s linear;
     -o-transition: 0.75s linear;
        transition: 0.75s linear;


}

.showBtn{
	width: 100%;
	height: 55px;
	font-size: 19px;
	background-color: deepskyblue;
	border: none;
}


$(document).ready(function(){

	$('.showBtn').click(function(){
		$('.collapse-content').toggleClass('active-collapse');
		if($('.showBtn').text() == "Show more"){
			$('.showBtn').text("Hide")
		}

		else{
			$('.showBtn').text("Show more");
		}


		var id = $('.topContainer').offset().top;
		var classCheck = $('collapse-content').hasClass('active-collapse')

		if(classCheck > 0){
			$(window).animate({
				scrollTop: 0
			}, 750);
			return false;
		}

 });

});