<?php

// create curl resource
$ch = curl_init();
// set url
curl_setopt( $ch, CURLOPT_URL, "https://imas.org.sg/members-directory/index.php/api/listing/" );

//return the transfer as a string
curl_setopt( $ch, CURLOPT_RETURNTRANSFER, 1 );

// $output contains the output string
$html1 = curl_exec( $ch );

// close curl resource to free up system resources
curl_close( $ch );


// create curl resource
$ch = curl_init();
// set url
curl_setopt( $ch, CURLOPT_URL, "https://imas.org.sg/members-directory/index.php/api/listing/1" );

//return the transfer as a string
curl_setopt( $ch, CURLOPT_RETURNTRANSFER, 1 );

// $output contains the output string
$html2 = curl_exec( $ch );

// close curl resource to free up system resources
curl_close( $ch );


// create curl resource
$ch = curl_init();
// set url
curl_setopt( $ch, CURLOPT_URL, "https://imas.org.sg/members-directory/index.php/api/listing/2" );

//return the transfer as a string
curl_setopt( $ch, CURLOPT_RETURNTRANSFER, 1 );

// $output contains the output string
$html3 = curl_exec( $ch );

// close curl resource to free up system resources
curl_close( $ch );

// create curl resource
$ch = curl_init();
// set url
curl_setopt( $ch, CURLOPT_URL, "https://imas.org.sg/members-directory/index.php/api/listing/3" );

//return the transfer as a string
curl_setopt( $ch, CURLOPT_RETURNTRANSFER, 1 );

// $output contains the output string
$html4 = curl_exec( $ch );

// close curl resource to free up system resources
curl_close( $ch );

?>
<style>
	.filtering {
		display: inline-block;
		padding: 8px 25px;
		color: #fff;
		background-color: #c6c8ca;
		float: left;
		margin-right: 10px;
	}	
	.selected2 {
		background-color: #000 !important;
		color: #fff !important;
	}
	.none {
		display:none;
	}
</style>
<script>
	function show_all() {
		$( ".member" ).hide();
		$( "#contentall" ).show();
		$('#type1').removeClass('selected2');
		$('#type2').removeClass('selected2');
		$('#showall').addClass('selected2');
	}
	function show_type( type ) {
		$('#type1').removeClass('selected2');
		$('#type2').removeClass('selected2');
		$('#type3').removeClass('selected2');
		$('#type'+type).addClass('selected2');
		$('#showall').removeClass('selected2');
		$( ".member" ).hide();
		$( "#content" + type ).show();
	}	
</script>

<div class="filtering selected2" id="showall" onclick="show_all();return false;">ALL</div>
<div class="filtering" id="type1" onclick="show_type(1);return false;">REGULAR MEMBERS</div>
<div class="filtering" id="type2" onclick="show_type(2);return false;">ASSOCIATE MEMBERS</div>
<div class="filtering" id="type3" onclick="show_type(3);return false;">ASSOCIATE FINTECH MEMBERS</div>
<br clear="all">
<div id="contentall" class="member">
	<?php echo $html1; ?>
</div>
<div id="content1" class="member none">
	<?php echo $html2; ?>
</div>
<div id="content2" class="member none">
	<?php echo $html3; ?>
</div>
<div id="content3" class="member none">
	<?php echo $html4; ?>
</div>