How to remove space of hidden filter items?

Hello, I want to create a webpage which have function similar to faq page using filter function.
Below is what I modify to implement it.
The filter function is work , but the div tag(classrooms)'s height isn't modify.This led to hidden items still hold space.
Please give me some help,thanks~

<ul id="portfolio-filter" class="portfolio-filter clearfix" data-container="#portfolio">

			@if (isset($tags))
				<li class="activeFilter"><a href="#">全部</a></li>
				@foreach ($tags as $key => $value)
					<li><a href="#">{{$value}}</a></li>
				@endforeach
			@endif

		</ul><!-- #portfolio-filter end -->

		<div class="clear"></div>

		<!-- Portfolio Items
		============================================= -->
		<div id="classrooms" class="portfolio grid-container portfolio-1 clearfix">

			@if (isset($items_row1))
				@foreach ($items_row1 as $element)
					<div id="classroom" class="classroom classroom-{{ $element->i_mode }}">
					<article class="portfolio-item pf-media pf-icons clearfix">
						<div class="portfolio-image">
							<a>
								<img />pic)}}" alt="{{$element->alt}}">
							</a>
						</div>
						<div class="portfolio-desc">
							<h3><a>url}}">{{$element->title}}</a></h3>
							{!! $element->content !!}
						</div>
					</article>
					</div>
				@endforeach
			@endif
		</div><!-- #portfolio end -->

	</div>
@stop

@section('js')
	<script>

		$(document).ready(function($){
			var $classroomItems = $('#classrooms .classroom');
			if( window.location.hash != '' ) {
				var getClassroomFilterHash = window.location.hash;
				var hashClassroomFilter = getClassroomFilterHash.split('#');
				if( $classroomItems.hasClass( hashClassroomFilter[1] ) ) {
					$('#portfolio-filter li').removeClass('activeFilter');
					$( '[data-filter=".'+ hashClassroomFilter[1] +'"]' ).parent('li').addClass('activeFilter');
					var hashClassroomSelector = '.' + hashClassroomFilter[1];
					$classroomItems.css('display', 'none');
					if( hashClassroomSelector != 'all' ) {
						$( hashClassroomSelector ).fadeIn(500);
					} else {
						$classroomItems.fadeIn(500);
					}
				}
			}

			$('#portfolio-filter a').click(function(){
				$('#portfolio-filter li').removeClass('activeFilter');
				$(this).parent('li').addClass('activeFilter');
				var classroomSelector = $(this).attr('data-filter');
				$classroomItems.css('display', 'none');
				if( classroomSelector != 'all' ) {
					$( classroomSelector ).fadeIn(500);
				} else {
					$classroomItems.fadeIn(500);
				}
				return false;
			});