Question

I have this block of code where when I hover (click for purposes of this example though but ultimately hover) on a particular box I want to target that div with universal jQuery code. I want the image inside the div to hide and a new div to appear and animate the width to say 250px. Been trying to target the second class of the div but to no avail. Anyone have any thoughts?

    $(document).ready(function(){
        $('.partner_box').click(function() {
            var hidden_div;
            hidden_div = $(this).attr('class').eq(1);
            //hidden_div = $(hidden_div).eq(1).html();

            //hidden_div = hidden_div:nth-child(1);

            $(hidden_div + ' img').hide();
            console.log(hidden_div);

            //alert(hidden_div);
            //alert($(hidden_div).attr('class').split(' ')[1])

            /*$('.partner_box div').animate({
                top: '0px',
                right: '0px',
                bottom: '0px',
                left: '0px',
                display: 'block',
                position: 'absolute',
                width: '200px'
            });*/
        });
    });

    <div id="partner_grid">
        <!--LINE ONE-->
        <div class="partner_box partner_box1">
            <img src="images/partners/asx.jpg" alt="ASX" />
            <div style="display:none;">
                <p>This is the text for the slide.</p>
            </div>
        </div>
        <div class="partner_box partner_box2">
            <img src="images/partners/beauchamp.jpg" />
            <div style="display:none;">
                <p>This is the text for the slide.</p>
            </div>
        </div>
        <div class="partner_box partner_box3">
            <img src="images/partners/decillion_group.jpg" />
            <div style="display:none;">
                <p>This is the text for the slide.</p>
            </div>
        </div>
        <div class="partner_box partner_box4">
            <img src="images/partners/dtcc.jpg" />
            <div style="display:none;">
                <p>This is the text for the slide.</p>
            </div>
        </div>
    </div>

Answer 1

I wasn’t able to parse the classes effectively, so I just made unique ids for each slide.

$('.partner_box').click(function() {
    var hidden_div;
    hidden_div = $(this).attr('id');
});

Thanks for all the help though.