<style>
.hide {
display:none;
}

#button {
cursor: pointer;
}

.borderHome:hover{
border: 5px solid;
padding: 5px;
}

.fade-in {
  animation: fadeIn ease 5s;
  -webkit-animation: fadeIn ease 5s;
  -moz-animation: fadeIn ease 5s;
  -o-animation: fadeIn ease 5s;
  -ms-animation: fadeIn ease 5s;
}
@keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-moz-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-webkit-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-o-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-ms-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
}

</style>


<h3 id="hide" class="hide fade-in" style="text-align: center;">
	<span style="color: #ffffff;">
		<a class="borderHome" style="color: #ffffff;" href="http://opt.opt.net.pl">Home</a>&nbsp;&nbsp;&nbsp;&nbsp;
		<a class="borderHome" style="color: #ffffff;" href="#onas">O nas </a>&nbsp;&nbsp;&nbsp;&nbsp;
		<a class="borderHome" style="color: #ffffff;" href="#uslugi">Usługi</a>&nbsp;&nbsp;&nbsp;&nbsp;
		<a class="borderHome" style="color: #ffffff;" href="#partnerzy">Partnerzy</a>&nbsp;&nbsp;&nbsp;&nbsp;
		<a class="borderHome" style="color: #ffffff;" href="#kontakt">Kontakt</a>&nbsp;&nbsp;&nbsp;&nbsp;
	</span><br /><br />
	<div style="display: block;">
		<div id="ukryjDiva" style="display: flex; text-align: center; margin-left:40%;">

			<center><img id="globalClick" style="cursor: pointer;" height="50" width="50" src="http://opt.opt.net.pl/wp-content/uploads/2020/07/Global.png"></img><br /><font color="white" size="2" style="padding: 15px;">Odwiedź nas</font><Br /></center>

			<center><img id="usterkaClick" style="cursor: pointer;"height="50" width="50" src="http://opt.opt.net.pl/wp-content/uploads/2020/07/Research.png"></img><br /><font color="white" size="2" style="padding: 15px;">Napraw usterkę</font></center>

			<center><img id="kontaktClick" style="cursor: pointer;" height="50" width="50" src="http://opt.opt.net.pl/wp-content/uploads/2020/07/Communication.png"></img><br /><font color="white" size="2" style="padding: 15px;">Napisz do nas</font></center>


		</div>

		<div id="pokazGlobal" style="display: none;">
				<center>
					<img height="50" width="50" src="http://opt.opt.net.pl/wp-content/uploads/2020/07/Global.png"></img><font color="white" size="2" style="padding: 15px; position: relative; bottom: 19px;">Opticom.Solutions, Malików 146B, 25-671 Kielce</font>
					<img id="zamknijGlobal" style="position: relative; bottom: 35px; cursor: pointer;" src="http://opt.opt.net.pl/wp-content/uploads/2020/07/krzyzkMalyBezTla.png"></img>
				</center>
		</div>

		<div id="pokazUsterke" style="display: none;">
				<center>
					<img height="50" width="50" src="http://opt.opt.net.pl/wp-content/uploads/2020/07/Research.png"></img><font color="white" size="2" style="padding: 15px; position: relative; bottom: 19px;">Zleć usterkę! Tel.: +48 505 303 332</font>
					<img id="zamknijUsterke" style="position: relative; bottom: 35px; cursor: pointer;" src="http://opt.opt.net.pl/wp-content/uploads/2020/07/krzyzkMalyBezTla.png"></img>
				</center>
		</div>

		<div id="pokazKontakt" style="display: none;">
				<center>
					<img height="50" width="50" src="http://opt.opt.net.pl/wp-content/uploads/2020/07/Communication.png"></img><font color="white" size="2" style="padding: 15px; position: relative; bottom: 19px;">
						Adres e-mail: kontakt@opticom.solutions
					</font>
					<img id="zamknijKontakt" style="position: relative; bottom: 35px; cursor: pointer;" src="http://opt.opt.net.pl/wp-content/uploads/2020/07/krzyzkMalyBezTla.png"></img>
				</center>
		</div>
	</div>

</h3>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<script>
		$(document).ready(function() {
		//1 div
		$("#globalClick").click(function () {
		$('#ukryjDiva').slideToggle('block');
		$('#pokazGlobal').slideToggle('normal');
		});

		$("#zamknijGlobal").click(function () {
		$('#ukryjDiva').slideToggle('normal');
		$('#pokazGlobal').slideToggle('block');
		});
		//2 div
		$("#usterkaClick").click(function () {
		$('#ukryjDiva').slideToggle('block');
		$('#pokazUsterke').slideToggle('normal');
		});

		$("#zamknijUsterke").click(function () {
		$('#ukryjDiva').slideToggle('normal');
		$('#pokazUsterke').slideToggle('block');
		});
		//3 div
		$("#kontaktClick").click(function () {
		$('#ukryjDiva').slideToggle('block');
		$('#pokazKontakt').slideToggle('normal');
		});

		$("#zamknijKontakt").click(function () {
		$('#ukryjDiva').slideToggle('normal');
		$('#pokazKontakt').slideToggle('block');
		});

		});

		const button = document.getElementById('button')

		const hide = document.getElementById('hide')
		console.log(button)
		//to jest onlick na button napisany
		//w standardzie ES6 czyli funkcja strzałkowa
		button.onclick = ()  => {

			hide.classList.toggle('hide');

		}
</script>