Question

Looking to tweak this script: http://css-tricks.com/examples/InfoGrid/

I’ve added an image within each “dt”, I’d like it to be a specific size when closed & then animate larger when that “dt” is selected (much like how the text is). Of course then return to it’s original size when a different “dt” is selected.

Also would like more control over things that are in their “normal state” vs. “selected state”. Any ideas?

<div id="page-wrap">
    <div class="info-col">
        <h2>Superman</h2>
        <a class="image superman" href="http://jprart.deviantart.com/art/Batman-and-Superman-64545242">View Image</a>
    <dl>
          <dt><img src="http://s3.buysellads.com/1252508/65529-1308680363.jpg"> Other text</dt>
          <dd>Stuff Here1</dd>

          <dt><img src="http://s3.buysellads.com/1252508/65529-1308680363.jpg"> Other text 2</dt>
          <dd>Stuff Here2</dd>
</div>

            <div class="info-col">
        <h2>Superman 2</h2>
        <a class="image superman" href="http://jprart.deviantart.com/art/Batman-and-Superman-64545242">View Image 2</a>
    <dl>
          <dt><img src="http://s3.buysellads.com/1252508/65529-1308680363.jpg"> Other text 3</dt>
          <dd>Stuff Here3</dd>

          <dt><img src="http://s3.buysellads.com/1252508/65529-1308680363.jpg"> Other text 4</dt>
          <dd>Stuff Here4</dd>
</div>

</div>

The JS:

$(function() {

// Set up variables
var $el, $parentWrap, $otherWrap, $imgBig,
    $allTitles = $("dt").css({
        padding: 5, // setting the padding here prevents a weird situation, where it would start animating at 0 padding instead of 5
        "cursor": "pointer" // make it seem clickable
    }),
    $allCells = $("dd").css({
        position: "relative",
        top: -1,
        left: 0,
        display: "none" // info cells are just kicked off the page with CSS (for accessibility)
    });





// clicking image of inactive column just opens column, doesn't go to link   
$("#page-wrap").delegate("a.image","click", function(e) { 

    if ( !$(this).parent().hasClass("curCol") ) {         
        e.preventDefault(); 
        $(this).next().find('dt:first').click(); 
    } 


});

// clicking on titles does stuff
$("#page-wrap").delegate("dt", "click", function() {

    // cache this, as always, is good form
    $el = $(this);

    // if this is already the active cell, don't do anything
    if (!$el.hasClass("current")) {

        $parentWrap = $el.parent().parent();
        $otherWraps = $(".info-col").not($parentWrap);

        // remove current cell from selection of all cells
        $allTitles = $("dt").not(this);

        // close all info cells
        $allCells.slideUp();


        // return all titles (except current one) to normal size
        $allTitles.animate({
            fontSize: "14px",
            paddingTop: 5,
            paddingRight: 5,
            paddingBottom: 5,
            paddingLeft: 5
        });

        // animate current title to larger size            
        $el.animate({
            "font-size": "18px",
            paddingTop: 10,
            paddingRight: 15,
            paddingBottom: 0,
            paddingLeft: 10
        }).next().slideDown();

        // make the current column the large size
        $parentWrap.animate({
            width: 351
        }).addClass("curCol");

        // make other columns the small size
        $otherWraps.animate({
            width: 140
        }).removeClass("curCol");

        // make sure the correct column is current
        $allTitles.removeClass("current");
        $el.addClass("current");  

    }

});


$("#starter").trigger("click");

});

Answer 1

The answer that worked for me is:

       $el.find('img').animate({         //enlarge image(s)
     width: 225
    }).parent().next().slideDown();


    $allTitles.find('img').animate({         //reduce image(s)
     width: 125
    }).parent().next().slideDown();