Для всех элементов меню которые открывают контейнер, прописываешь атрибут class="menu-trigger-open"
Для всех кнопок которые закрывают контейнер, прописываешь атрибут class="menu-trigger-close"
Для всех элементов (которые и открывают и закрывают) прописываешь атрибут menu-id="id управляемого элемента".
Допустим для кнопки #menu-trigger-2 надо прописать "menu-id"="system-block-hid" и т.д.

В итоге ссылка для открытия первого блока будет выглядеть следующим образом:

<a href="#" id="menu-trigger-2" class="menu-trigger-open" menu-id="system-block-hid">Система ДПО ⬇</a>

А ссылка для закрытия первого блока так:

<a href="#" id="menu-trigger-a2" class="menu-trigger-close" menu-id="system-block-hid">⬆</a>

Теперь для каждого блока (который будет показываться) пропишем атрибут class="menu-container". Также к каждому блоку добавим атрибут со значением, которое будет определять отступ для информации ниже. В твоем коде эти значения указаны тут:

$( ".container" ).animate({
             bottom: "+=200", // Вот это число надо указать для соответствующего блока ( у каждого они свои)
}, 1000, function() {
            // Animation complete.
});

В итоге блок #system-block-hid получится таким:

<div id="system-block-hid" class="menu-container" animate-container="200" style="display: none;">
... тут содержимое
</div>

По аналогии пропиши каждому блоку свои значения.

Теперь тот код JS, который используется у тебя для открытия/закрытия блоков удали и вставь это:

$(document).ready(function(){
	function openContainer(menu, animateContainerVal) {
		$(".menu-container.open").each(function (idx, element) {
			let jElement = $(element);
			closeContainer(jElement, jElement.attr("animate-container"), false);
		});
		menu.slideDown(400, function() {
			menu.addClass("open");
			$(".container").animate({
				marginTop: animateContainerVal+"px"
			}, 1000, function(){
				// Animation complete
			});
		});
	}

	function closeContainer(menu, animateContainerVal, withAnimateContainer) {
		menu.slideUp(400, function(){
			menu.removeClass("open");
			if(withAnimateContainer) {
				$(".container").animate({
					marginTop: "0px"
				}, 1000, function(){
					// Animation complete
				});
			}
		});
	}
	
	$(".menu-trigger-open").click(function(e) {
		e.preventDefault();
		let menu = $("#"+$(this).attr("menu-id")),
		animateContainerVal = menu.attr("animate-container");
		if(menu.hasClass("open")) {
			closeContainer(menu, animateContainerVal, true);
		} else {
			openContainer(menu, animateContainerVal);
		}
	});

	$(".menu-trigger-close").click(function (e) {
		e.preventDefault();
		let menu = $("#"+$(this).attr("menu-id")),
		animateContainerVal = menu.attr("animate-container");
		closeContainer(menu, animateContainerVal, true);
	});
});

Размер загружаемого файла настраивается в файле php.ini строчкой "upload_max_filesize = 10M" (без кавычек).

В браузере можно проверить через javascript:

let file = document.getElementById("inputfile").files[0];
if(file.size > 10*1024*1024) {
    alert("Слишком большой файл");
    return;
}

Но в любом случае эта проверка весьма условна, т.к. отправить файл бОльшего размера все равно возможно.

Можно на серверной стороне, но проверять уже загруженный файл такая себе затея. Если сильно хочется:

if($_FILES['uploadfile']['size'] > 10*1024*1024) {
    exit("Файл слишком большой");
}

И все равно размер загружаемого файла будет зависеть от настройки в php.ini.

Убери прозрачность из .ptr и добавь это:
.ptr img {opacity: 0.3;}