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~

			@if (isset($tags))
				
- [全部](#)
				@foreach ($tags as $key => $value)
					
- [{{$value}}](#)
				@endforeach
			@endif

		

		

		
		

			@if (isset($items_row1))
				@foreach ($items_row1 as $element)
					i_mode }}">
					
						
							
								pic)}}" alt="{{$element->alt}}">
							
						
						
							url}}">{{$element->title}}
							{!! $element->content !!}
						
					
					
				@endforeach
			@endif
		

	
@stop

@section('js')
	

		$(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;
			});