Question

The function I am writing is meant to slide down a panel when the enduser clicks on a thumbnail. The idea is that the panel will display a larger version of the image, the title, and description also.

Here is my jQuery:

$(document).ready(function() {
var $feature = $('#feature')
.wrap('<div id="feature-outer"></div>');
$('.thumb').click(function() {
$feature.blindToggle('slow');
$feature.style.zIndex="-1"; 
$('#featuretitle').source=this.title;
$('#featureinfo').source=this.info;
$('#featureimage').source=this.image;  


});    
});

And here is my thumb HTML:

<div class=thumb title="title here" info="description here" image="sunset.jpg"></div>

Here is where the information is going to be loaded:

<div class=feature id="feature">
     <div class=featureimage id="featureimage"></div>
     <div class=featureinfo>
          <div class=featureinfotitle id="featuretitle">Title</div>
          <p id="featureinfo">info</p>
     </div>

When I click on the thumb, the panel slides down but the information in the boxes stay their default.

Answer 1

I think you want to do something more like this. Note: there is no property of source on a Jquery object.

$(function() {
  var $feature = $('#feature').wrap('<div id="feature-outer"></div>');
  $('.thumb').click(function() {
    $feature.blindToggle('slow');
    $feature.style.zIndex="-1"; 
    $('#featuretitle').html($(this).attr('title'));
    $('#featureinfo').html($(this).attr('info'));
    $('#featureimage').attr('src', $(this).attr('image'));  
  });    
});