JSFiddle - React, Tailwind, and code Playground

by nomadwebdesign

HTML

<section>
	<a href="#" data-file="data1">Load data 1</a>
	<a href="#" data-file="data2">Load data 2</a>
	<div id="content"></div>
</section>

JavaScript

$(document).ready(function(){
	$('body').on('click','a',function(event){
		event.preventDefault();
		var datafile = $(this).data('file');
		console.log(datafile);
		if($('#content').html().length){
			$('#content').fadeOut(700,function(){
				$('#content').load(datafile + '.php').hide().fadeIn(700);
				console.log('has content, fadeout then load fadein ' + datafile);
			})
		} else {
			$('#content').load(datafile + '.php').hide().fadeIn(700);
			console.log('no content, load fadein ' + datafile);
		}
	});
});