Анимация с блоками

[bravoo]

Помогите пожалуйста помочь с анимацией , хочу сделать 4 блока горизонтальных в один ряд , на каждом блоке есть контент и кнопка , при нажатии на кнопку 3 других блока исчезают(по очереди), а тот на котором была нажата кнопка плавно растягивается на 100% строки , ну и при закрытии все обратно (блок стягивается и появляются прежние блоки), дело в том что работаю с сеткой bootstrap, и нужно сохранить адаптацию блоков
, додумался только до такого кода , сама анимация работает , но кривовато , первые два блока анимируются плавно , а последние 2 при свертывании резко прыгают влево исчезают и становятся на свое место, то есть когда я задаю изначальную ширину блока он прыгает не на свое место в сетке пока не появились другие 3 блока. Извините за такой код неграмотный , сижу уже 6 часов не могу сделать, подскажите пожалуйста что можно сделать чтобы была плавная анимация поочередная, чтобы блоки сохраняли свое положение и не прыгали при развертке на другие места в сетке, и если можно дайте совет как код сократить

<div class="container-fluid">
		<div class="row main_blocks_active">
			<div class="col-md-3 transition_blocks">
				<div id="blocks">
					<div class="block_text">
					</div>
		<input type="button" value="Читать" id="button_block_info">
				</div>
			</div>
			<div class="col-md-3 transition_blocks">
				<div id="blocks">
					<div class="block_text">
					
					</div>
		<input type="button" value="Читать" id="button_block_info">
				</div>
			</div>
			<div class="col-md-3 transition_blocks">
				<div id="blocks">
					<div class="block_text">
					</div>
		<input type="button" value="Читать" id="button_block_info">
				</div>
			</div>
			<div class="col-md-3 transition_blocks">
				<div id="blocks">
					<div class="block_text">
					</div>
		<input type="button" value="Читать" id="button_block_info">
				</div>
			</div>
		</div>
	</div>

$('#blocks > #button_block_info').click(function(){
		$(this).parent('#blocks').addClass('active_blocks');
		$('#blocks:not(.active_blocks)').addClass('hidden_blocks');
		$('.hidden_blocks:eq(0)').fadeOut(700, function(){
			$('.hidden_blocks:eq(1)').fadeOut(700, function(){
			$('.hidden_blocks:eq(2)').fadeOut(700, function(){
			$('.hidden_blocks:eq(3)').fadeOut(700);
			$('.active_blocks').parent('.col-md-3').removeClass('col-md-3').addClass('col-md-12');
			$('.active_blocks').css("maxWidth","100%",700);
			});
			});
		});
		
	});
		$('.button_show').click(function(){
			$('.active_blocks').parent('.col-md-12').removeClass('col-md-12').addClass('col-md-3');
			$('.active_blocks').css("maxWidth","285px",300);
			$('div .hidden_blocks:eq(0)').fadeIn(700, function(){
			$('div .hidden_blocks:eq(1)').fadeIn(700, function(){
			$('div .hidden_blocks:eq(2)').fadeIn(700, function(){
				$('.active_blocks').removeClass('active_blocks');
				$('.hidden_blocks').removeClass('hidden_blocks');
				
			});
			});
			});
			
		});