I’m working on a website’s page that has about 20 PDF files. All those 20 PDF files are displayed with a “PDF viewer for Elementor” plugin in each separate template created using free “Elementor – Footer, Header & Blocks” plugin because I needed to paste shortcodes in tabs (tabs are simply named after their own PDF file simply for user to select which one he wants to read). I didn’t know how to display PDF’s in the page otherwise and selecting PDF file as an Image didn’t work and this is the approach I’ve come up with.

There is one problem though when you go to that page all those 20 templates with PDF’s are still being preloaded even though Elementor’s Tab widget hides them by default. This makes the user to wait quite some time for the PDF’s to appear. Better yet they sometimes don’t even show up but you can fix that if you refresh the page so I’m guessing that the server is overloading or something and as a result It doesn’t show up every time. I’m still a newbie student in this so I don’t know.

My approach to fix the page loading all the PDF’s was to use custom jQuery script and append templates shortcodes into html in which the result should be that the template with PDF that the user selects would start loading and showing only just then – when it’s selected by the user pressing a certain tab button.

Here’s my TABS html:

<div class="custom-tabs">
<button class="tabs" id="my-tabid1" data-target=".2019-METŲ-I-KETV">2019 METŲ I KETV.</button>
         <button class="tabs" id="my-tabid2"  data-target=".2018-METŲ-METINIS">
2018 METŲ METINIS</button>
         <button class="tabs" id="my-tabid3" data-target=".2018-METŲ-III-KETV">2018 METŲ III KETV.</button>
         
         </div>

PDF’s html:

<div class="2019-METŲ-I-KETV tab_content active" id="my-tab1">
           
        </div>

        <div class="2018-METŲ-METINIS tab_content" id="my-tab2">
          
        </div>

        <div class="2018-METŲ-III-KETV tab_content" id="my_tab3">
           
        </div>

And finally jQuery for this whole process:

var shortcodes = [ 
    '<?php echo do_shortcode ("[pafe-template id="823"]"); ?>',
    
    '<?php echo do_shortcode ("[pafe-template id="890"]"); ?>',
    
    '<?php echo do_shortcode ("[pafe-template id="893"]"); ?>'
    
];

var target_strings = [
    
    '2019-METŲ-I-KETV',
    
    '2018-METŲ-METINIS',
    
    '2018-METŲ-III-KETV'
    
    ];

jQuery('.tabs').on('click', function(){
          var target = jQuery(jQuery(this).data('target'));
          target.siblings().removeClass('active');
          target.addClass('active');
          console.log('test');
          var targettostring = target.attr('class');
          
          var i;
          for(i = 0; i < 3; i++){
              console.log('doing loop');
              console.log(targettostring);
              console.log(target_strings[i]);
              if(targettostring.includes(target_strings[i])){
                  console.log('found a match');
                  jQuery(target).append(shortcodes[i]);
                  
              }
              
          }
          
          
        });

At first in jQuery I only used shorter [pafe-template id="890"] for “shortcodes” array. That’s before I’ve come across this Question:
call shortcode in javascript
I tried the php echo method for some reason before understanding that this goal is only achieved using AJAX method. This is the point where I need help.
I completely don’t understand the parts where @Douglas.Sesar wrote placeholders like:

jQuery.ajax({ url: yourSiteUrl + "/wp-admin/admin-ajax.php",

yourSiteUrl is literally my site url? It’s “https://ikiwi.website/telsiugaisrine” and it’s a placeholder which will change later (and + /veikla/ is the page of the website that has this whole pdf thing) so this means I’ll have to change yourSiteUrl and not that it’s a problem or anything but is there a way to automate this or something?

       'action':'your_ajax',
       'fn':'run_shortcode_function',
       'some_needed_value': jQuery('#input_for_needed_value').val()
       },

What is “data” here and what values do I write say in my case? What did he mean by #input_for_needed_value? Is this where I write my class or id of the desired div where I want to place and execute the shortcode template? I completely don’t understand what should I write here..

success: function(results){
        //do something with the results of the shortcode to the DOM
    },
    error: function(errorThrown){console.log(errorThrown);}
});// end of ajax

Do something with the results of the shortcode – is this something that’s optional to write like a console.log that I used in my jQuery before?

add_action('wp_ajax_nopriv_your_ajax', 'your_ajax_function');
add_action('wp_ajax_your_ajax', 'your_ajax_function');
function your_ajax_function(){ 

Didn’t I wrote back in data: action that my ajax is called “your_ajax”? Thats how I don’t understand any purpose and where do those lines in quotes come from because ‘your_ajax_function’ has extra ‘_function’ line especially everything else.
Same and even bigger questions in the next upcoming lines.

I’d greatly appreciate if someone could explain me how should I work with that example. Perhaps there is a Free Plugin that does this tabbing with ajax shortcodes? Haven’t really found one. I’m an absolute zero in php. I only know C and C++ well if we’re talking about back-end things. I get some sort of sense reading this php but it quickly fades with those ever changing and non repetitive quoted titles.

I hope I’m not asking too much or this isn’t cheesy in any way.
Appreciate any help regarding this!