Untitled

<html>
<head>
<title>Zad 4</title>
</head>
<body>
<style>
body {
	margin:0;
}
p {
	margin:0;
	padding:0;
}
#show, #show2 {
	color: blue;
	cursor:pointer;
}
div {
	float:left;
	margin-left:50px;
}
</style>
<div>
<h1>Zadanie 1</h1>
<p>Tu treść zadania</p>
<p id="show"></p>
<p id="showed">Rozwiązanie</p>
</div>

<div>
<h1>Zadanie 2</h1>
<p>Tu treść zadania</p>
<p id="show2"></p>
<p id="showed2">Rozwiązanie</p>
</div>


<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.17.0/dist/jquery.validate.js"></script>
<script>
$( document ).ready(function() {
  $( "#showed" ).hide();
  $( "#showed2" ).hide();
  $( "#show" ).html( "Pokaż rozwiązanie" );
  $( "#show2" ).html( "Pokaż rozwiązanie" );
});


$( "#show" ).click(function() {
  if($('#showed').is(':visible')) {
	    $( "#showed" ).hide();
  $( "#show" ).html( "Pokaż rozwiązanie" )
  } else {
  $( "#showed" ).show();
  $( "#show" ).html( "Schowaj rozwiązanie" )
  }
});

$( "#show2" ).click(function() {
    if($('#showed2').is(':visible')) {
	    $( "#showed2" ).hide();
  $( "#show2" ).html( "Pokaż rozwiązanie" )
  } else {
  $( "#showed2" ).show();
  $( "#show2" ).html( "Schowaj rozwiązanie" )
  }
});
</script>
</body>
</html>