Сделал через Js

<script>
			function hideOf(){
				$('.hideOf').toggle();
			};
		</script>
		<script>
			function hideOf1(){
				$('.hideOf1').toggle();
			};
		</script>
		<script>
			function hideOf2(){
				$('.hideOf2').toggle();
			};
		</script>

И кнопочки

<button value ="clickBlock1" onclick="hideOf()"><img src="menu/button-6112.png" width="100" height="100"    alt="1"> </button>
			<button value ="clickBlock2" onclick="hideOf1()"><img src="menu/button-8819.png" width="100" height="100"   alt="1"> </button>
			<button value ="clickBlock3" onclick="hideOf2()"><img src="menu/button-82730.png" width="100" height="100"  alt="1"> </button>

Но теперь нужно как то сделать, чтобы по клику кнопки пропадали

Может так?
Только зачем юзать toggle, если повторно нажать на кнопку просто не сможешь?

<button value="clickBlock1" onclick="$(this).hide();$('.hideOf').toggle();">
	<img src="menu/button-6112.png" width="100" height="100" alt="1"/>
</button>
<button value="clickBlock2" onclick="$(this).hide();$('.hideOf1').toggle();">
	<img src="menu/button-8819.png" width="100" height="100" alt="1"/>
</button>
<button value="clickBlock3" onclick="$(this).hide();$('.hideOf2').toggle();">
	<img src="menu/button-82730.png" width="100" height="100" alt="1"/>
</button>