Create tab using ajax in WordPress.

 Create ajax function : 

function passPortDateSave() {

global $wpdb;

  $code = explode("_",$_REQUEST['id']);

  if($code[0] == 'gform' ){

  $id= $code[1];

  echo do_shortcode("[gform id=$id]");

  }else{

   $id= $code[0];

   echo do_shortcode("[tableau_embade id=$id]");

  }

die();

}

add_action('wp_ajax_passPortDateSave', 'passPortDateSave');

add_action('wp_ajax_nopriv_passPortDateSave', 'passPortDateSave');


Create shortcode function 

function tab_with_parameter($attr){

 $tabtitle = explode(",",$attr['title']);

 $tabcode = explode(",",$attr['datacode']);

 

 if(!empty($_REQUEST['code'])){

  $code = explode("_",$_REQUEST['code']);

  if($code[0] == 'gform' ){

  $id= $code[1];

  echo "[gform id=$id]";

  }else{

   $id= $code[0];

   echo "[tableau_embade id=$id]";

  }

 }else{

 foreach($tabtitle as $key=>$att){

 echo '<a href="JavaScript:Void(0);" class="clickbtn button1 button" id="'.$tabcode[$key].'">'.$att.'</a>'; 

  }

  echo '<div id="loader" style="display:none;"><img src="https://flevix.com/wp-content/uploads/2019/07/Color-Loading-2.gif"/></div><div id="showtab"></div>';

 }

 

 echo '<style>

.button {

  border: none;

  color: white;

  padding: 0px 32px;

  text-align: center;

  text-decoration: none;

  display: inline-block;

  font-size: 16px;

  margin: 4px 2px;

  transition-duration: 0.4s;

  cursor: pointer;

}

.button1 {

  background-color: white; 

  color: black; 

  border: 2px solid #4CAF50;

}

.button1:hover {

  background-color: #4CAF50;

  color: white;

}

.clickbtn.active {

  background-color: #4CAF50;

  color: white;

}

</style>';

?>

<script>

jQuery(document).ready(function(){

var ajaxurl = '<?php echo admin_url( 'admin-ajax.php' ) ?>';

    jQuery(".clickbtn").click(function(){

    jQuery(this).siblings().removeClass('active');

    jQuery(this).addClass('active');

        //alert ('test');

jQuery('#loader').show();

        var data = {

            action: 'passPortDateSave',

            id: jQuery(this).attr('id')

        };

        jQuery.post(ajaxurl, data, function(response) {

//var datanew = '[contact-form-7 id="'+response+'" title="Contact form"]';

jQuery('#showtab').html(response);

jQuery('#loader').hide();

            //alert('Got this from the server: ' + response);

        });

    });    

});

</script>

<?php

}

add_shortcode( 'rascassettab' , 'tab_with_parameter' );