Change a div content after click on another div I would like to achieve, if is possible, change the content of a div with another content of the same type. For example I have two nodes whose content type are "news" but i want them to render on the same page after clicking on their links.

Tried to achieve with jQuery but i have an undefined error.

This is my code:

  $(document).ready(function() {
    var selector = '.title-noticia a';

    $(selector).click(function(e) {
      e.preventDefault();

      $.ajax({
        url: $(this).attr('href') + '?ajaxrequest',
        success: function(data) {
          $('.region-content').replaceWith(data);
        }
      });
    });
  });
})(jQuery);


But it doesn't seem to work, is there any way to achieve that without the use of AJAX links API? (It's to slow for me).
Thanks in advance!!!

UPDATE 1:

After some research, i managed to make it work (on the console), but the content doesn't replace on the page view.

This is my new code:

(function ($) {
  Drupal.behaviors.mybehavior = {
    attach: function (context, settings) {


      $('.title-noticia a').click(function(e) {
        e.preventDefault();

        $.ajax({
          url: $(this).attr('href'),
          type: 'post',
          data: {
            view_name: 'articulos_actualidad',
            view_display_id: 'page_2'
          },
          dataType: 'json',
          success: function (response) {
              $('.region-content').replaceWith(data);
              Drupal.attachBehaviors(); //Check on the console
          }
        }); 

      }); 
    }
  }
})(jQuery);


But the only result i have is: 

XHR finished loading: POST "http://www.example.com/somerenderedpage".


So it literally works but i cannot see the results on the page.

Hope you can help me. Thanks!

UPDATE 2:

I will post what i want to achieveI have a headache :) trying to make it work. What i want to achieve is to display the content of the selected link on a div. So i made a graphic so you can understand.



When i click on link 1, i want to display on the main div the content of the link 1, the same with link 2, 3 and X.

Is there any way to achieve that? tried with jQuery AJAX but the performance is poor, the same programatically making an ajax call.

I know i can do something like an slideshow but with content, but i cannot figure it out. Could you lend me a hand please? I will appreciate it. Thanks!
You need to conform to the coding standards and make it anonymous so it doesnt conflict with jQuery.

(function ($) {
  Drupal.behaviors.mybehavior = {
    attach: function (context, settings) {
      var selector = '.title-noticia a';

      $(selector).click(function(e) {
        e.preventDefault();
      }

      $.ajax({
        url: $(this).attr('href') + '?ajaxrequest',
        success: function(data) {
          $('.region-content').replaceWith(data);
        }
      });
    });
  });
})(jQuery);


See more: https://www.drupal.org/docs/7/api/javascript-api/managing-javascript-in-drupal-7

Your behavior will be called automatically, so there is no need for $(document).ready.