I am working on a website that has a list of vehicles on a listing page. Each has a more info button that loads a full screen panel and fetches the content from the individual vehicle pages without loading it.
Using ajax to load the content from another page into a div on the current page.
Here is the code
$('.vechicle-info').click(function(e) {
e.preventDefault();
$('.vehicle-ajax-details').hide();
$('.loading-content-wrap').show();
var loadFromUrl = $(this).attr('href')
setTimeout(function() {
$('.vehicle-ajax-details').load(loadFromUrl+' .vehicle-details-content', function() {
$('.vehicle-ajax-details').fadeIn(3000);
$('.loading-content-wrap').hide();
});
}, 1600)
});
The single page content/html being pulled in contains a set of webflow tabs. On the vehicle page the tabs work. But when the tabs are loaded using the ajax code the tabs do not work.
Is there a way with Javascript to re initiate the tabs after the ajax content is loaded so they will work?