load include not until its needed I have created an infinite loop by crossreferencing two includes to each other. On one page. My aim is to load pop up layers on a page (teachers and instruments) and have links to each other.

{#      include: _layer_instrument      #}
&lt;a   href="javascript:void(0)" onclick = 
"document.getElementById('{{teacher}}').style.display='block'; 
document.getElementById('fade').style.display='block'"&gt;
                        {{ teacher.title }}&lt;/a&gt; 
{% include "includes/_layer_teacher" %} 

{#     include: _layer_teacher         #}
&lt;a   href="javascript:void(0)" onclick = 
"document.getElementById('{{instrument}}').style.display='block'; 
document.getElementById('fade').style.display='block'"&gt;
                        {{ instrument.title }}&lt;/a&gt; 
{% include "includes/_layer_instrument" %}  


Is it possible to use ajax to not load the includes until they are needed?
You can create a custom plugin with Pluginfactory.io and check the box for Controllers but leave the name blank. Copy the downloaded files into your path/to/craft/craft/plugins/&gt;&gt;nameofyourplugin&lt;&lt;/ directory and install it in your cp. 

Then you'll insert a function like this in your controller

public function actionRenderTemplate(){
    $id = craft()-&gt;request-&gt;getParam('id');
    // do some checks if the id is valid or not here...

    $html = '';
    $success = false;
    $message = '';

    if($entry = craft()-&gt;entries-&gt;getEntryById($id)){
        // as example to render different templates based on entry type
        $entryType = $entry-&gt;getType()-&gt;handle; 
        $html = craft()-&gt;templates-&gt;render('path/to/your/template/' . $entryType, array(
            'entry' =&gt; $entry
        ));
        if($html){
            $success = true;
        }
    }else{
        $message = Craft::t('could not find entry with id ' . $id);
    }

    $this-&gt;returnJson([
        'message'   =&gt; $message,
        'success'   =&gt; $success,
        'html'      =&gt; $html
    ]);
}


And your Javascript could be this 

$('.load-instrument').click(function(){
    var data = {
        action: "pluginname/actionRenderTemplate",
        id: $(this).data('id')
    };
    $.ajax({
        type: "post",
        url: '',
        data: data,
        success: function(data){
            if(data.success === true){
                $("#idOfYourDiv").html(data.html);
            }else{
                // display error messages here
            }
        },
        error: function (XMLHttpRequest, textStatus) {
            console.log("Status: " + textStatus);
        }
    });
});


However I would recommend you to read the docs about Controllers and about templates to fully understand what you have to do here

edit: your html could be 

&lt;button data-id="{{instrument.id}}" class="load-instrument" value="click me"&gt;Click me&lt;/button&gt;