Need to toggle div on button click

Question

I need to toggle a content div on right side browser window. Something similar to this (i want to keep effects and close button) example - but with a difference, I want to open this panel from an a.class. I don´t want to open the panel based on id´s, i just want to open an area and then probably I will load ajaxed content.

Well I want to adapt the code on fiddle link to my situation but I don´t know how!

HTML Code:

<a class="teste" href="#">Button to Open Panel</a>

    <div class="panel">
    <span class="close">X</span>
    <div class="content">
        <!-- Content Goes Here -->
    </div>
</div>

Answer 1

something like this?

 $('a.teste').bind('click', function(e)
 {
    targetDiv = $('.teste .content');
    e.preventDefault();

    urlToLoad = $(this).attr('href');

    var request = $.ajax({
        url: urlToLoad,
        dataType: "html"
    });

    request.done(function(data) {
        targetDiv.html( data );
    });

    request.fail(function(jqXHR, textStatus) {
        alert( "Could not load the page: " + textStatus );
    }); 

 });

Answer 2

Here - I removed the second div in the panel

DEMO

<a class="teste" href="#">Button to open panel</a>

$('a.teste').on('click', function() {
    $panels.trigger('togglePanel');
    return false;
});