Refresh div onClick

Question

I'm using the awesome CodaSlider within wordpress to add a tabbed function to a page of mine but have run into a bit of a wall.

The CodaSlider uses a script that looks at the current content and defines a height automatically, however, I've got the option to open/close a div inside the slider to show more content but because the slider has already been defined a height, it won't automatically update.

My thoughts were to add a piece of JQuery that refresh the slider's div thus showing the new content without having to reload the entire page all the time.

So far this is what I have:

<div class="video-centre">
  <div class="video-title"> <img src="<?php echo get_bloginfo('template_url') ?>/images/video-propertiesforsale.jpg" alt="properties for sale" /> </div>
    <div class="video-point"> <img src="<?php echo get_bloginfo('template_url') ?>/images/video-point.jpg" alt="video pointer" /> </div>
    <div class="video-thumb">
      <div class="coda-slider" id="slider-id">
        <div>
          <h2 class="title"><span>Crouch End</span></h2>
          <?php the_field('crouch_end'); ?>
            <p class="video-more2"><a href="javascript:animatedcollapse.show(['expandable-2'])" id="refresh">View More</a></p>
            <div id="expandable-2">
            <?php the_field('properties_for_sale_hidden'); ?>
            <p class="video-close2"><a href="javascript:animatedcollapse.hide(['expandable-2'])" id="refresh">Close</a></p>
         </div>
        </div>





<script>
var $r = jQuery.noConflict();
    $r(function() {
      $r("#refresh").click(function(evt) {
         $r(".panel").load("index.php")
         evt.preventDefault();
      })
    })
</script>

The wall I've hit is that the script loads the entire page rather than the actual content it's supposed to and I can't seem to get it to do what I want.

I hope the above is understandable, it sounded alright in my head :S

Answer 1

Yeah, .load is intended to load the entire contents of a page. You can run .load , then go through the children to get what you want:

var div = $('<div/>').load('index.php');
$('.panel').replaceWith(div.find('.panel'));