toggle div hide

enable back and front extra info

HTML

<footer class="entry-footer">
<div class="front" style="display: block;">
<br>Titel: Mr Robot<br>Regisseur: mr Bean<br>Producent: Spielberg<br>Info: extra extra! extra extra! extra extra! extra extra! <br>Productiejaar: 2017              </div>
<div class="back" style="display: none;">
<br>Beschrijving: Een robot is een programmeerbare machine die verschillende taken uit kan voeren. Hierin verschilt hij van een numerieke machine, die is geprogrammeerd voor één taak. In de praktijk betekent....</div>
</footer>
<footer class="entry-footer">
<div class="front" style="display: block;">
<br>Titel: Mr Robot<br>Regisseur: mr Bean<br>Producent: Spielberg<br>Info: extra extra! extra extra! extra extra! extra extra! <br>Productiejaar: 2017              </div>
<div class="back" style="display: none;">
<br>Beschrijving: Een robot is een programmeerbare machine die verschillende taken uit kan voeren. Hierin verschilt hij van een numerieke machine, die is geprogrammeerd voor één taak. In de praktijk betekent....</div>
</footer>

JavaScript

$('.entry-footer').on('click', function(event) { 
	var klikobj = event.target; 
	$(klikobj).closest('.front').hide(); 
	$(klikobj).next('.back').show(); 
	$('.back').on('click', function(event) { 
		$(klikobj).closest('.front').show(); 
		$(klikobj).next('.back').hide(); 
	}); 
});