Confusion on how to make this work(sliding with query)

JavaScript
1

I am trying to get it where you hover over a box it stretches out to display more information. I am still considered a nube when it comes to jquery and was hoping someone could tell me the best way of doing this.
I set up a JSFIDDLE account as well: http://jsfiddle.net/eKszw/

Any help wold be greatly appreciated, thanks.

2

It currently reveals all the boxes with the same class name instead of just revealing the info on the box that was hovered. trying to make it so it gracefully degrades when jquery is off too

3

Hi,

If you want to expand the div for more info, you can’t use the class name as more than one box can have the same class name for styling.
Apply an individual id for each box and then access them for animation via jquery.

So, add an id to the div:


<div class="work">
    <div id="bottom">
          <div id="workwrapper">
               <div class="work">
                  <div id="web1" class="web"> <img src="images/portfolio/web-inhealth.jpg" alt="InHealth CDS">
                     <div class="info1">
                       <h2>Web Design</h2>
                       <p>A flash based website using the Gaia Framework. This site was initially built for a young entertainment company out of Atlanta.</p>
                       <a href=""><span>Read more</span></a> </div>

and then in jquery, replace calls:


 $('.work #bottom .work .info').hide();

to something like:


 $('#info1').hide();

HTH

4

Yeah, that would work except that i am going to have allot of those boxes and would have to create a hover event for each id and wold become redundant after a while.
Thanks

5

Figured out the answer to my problem
i was able to use the find selector and select the specific element with-in the current selector.
$(this).find(“.info”).show(0);

Take a look at my JSfiddle account to see it fixed http://jsfiddle.net/eKszw/2/

thanks

6

Nice :slight_smile: