Question

I have 2 spans.

First one: <span class="body">
Second one: <span class="desc">

My CSS:

.desc {display: none;}

What I want to do, is show the second span, when hovering the first. No fancy effects or anything, just show the span.
I know there is a simple jQuery solution out there, but I’m new to jQuery so I’d appreciate some help finding it. 😉

This is what I have so far. Is the syntax correct?

<script>
$(document).ready(function() {
    $(".body").hover(function () {
        $(".desc").toggle();
    })
})
</script>

UPDATE!

As @thenduks pointed out, this results in every .desc element to show when a .body is hovered. As you can probably imagine, I have several .body and .desc and I only want the corresponding .desc to show on hovering the .body.

This is part of my markup: (the whole site is still just local, so I can’t give you an url to test – sorry)

<ul class="form">
    <li>
      <label class="grid_3 alpha caption" for="from_name">Navn/Firma</label>
      <span class="grid_4 body"><input type="text" id="from_name" name="form[from_name]" size="20" value=""></span>
      <span class="grid_5 omega validation"><span class="formNoError" id="component74">Udfyld navn eller firma for afhentningsadressen.</span></span>
      <span class="grid_5 omega desc" style="display: none;"><p>Navnet på afsenderen.</p></span>
    </li>
    <li>
      <label class="grid_3 alpha caption" for="from_address1">Adresse</label>
      <span class="grid_4 body"><input type="text" id="from_address1" name="form[from_address1]" size="20" value=""></span>
      <span class="grid_5 omega validation"><span class="formNoError" id="component75">Udfyld afhentningsadressen.</span></span>
      <span class="grid_5 omega desc" style="display: none;"><p>Adressen på afsenderen.</p></span>
    </li>
    <li>
      <label class="grid_3 alpha caption" for="from_address2">Adresse 2</label>
      <span class="grid_4 body"><input type="text" placeholder="etage/lejlighedsnr./e.l." id="from_address2" name="form[from_address2]" size="20" value=""></span>
      <span class="grid_5 omega validation"><span class="formNoError" id="component76">Invalid Input</span></span>
      <span class="grid_5 omega desc" style="display: none;"><p></p></span>
    </li>
</ul>

Answer 1

This will result in hovering over any .body element showing all .desc elements.

If you post your actual markup we can figure out the proper code to show a corresponding .desc for a hovered .body.

Update: So, given the markup in the updated answer I’d probably re-write the handler like so:

$('.body').hover( function() {
  $(this).siblings('.desc').toggle();
} );

Update2: To have the same behavior on click and active is a bit tricky because as soon as you mouseout of the .body the .desc will hide even if you clicked on it. Doable though… I’d try this:

var showFunc = function() { $(this).attr('rel', 'open').siblings('.desc').show(); };
$('.body')
  .click( showFunc )
  .focus( showFunc )
  .hover(
    function() {
      // don't update 'rel' attribute
      $(this).siblings('.desc').show();
    },
    function() {
      // here's the tricky part, if the rel attr is set
      // then dont hide, otherwise, go ahead
      if( $(this).attr('rel') == 'open' ) {
        $(this).siblings('.desc').hide();
      }
    }
  );

So this will make it so that just hovering hides/shows as before, but if you click it will ‘stick’ open. In this case you’d probably want the show handler to also hide other open .descs so that you wont end up tons of open ones all over. So maybe showFunc should be:

var showFunc = function() {
  $("." + $(this).className).attr('rel', '');
  $(this).attr('rel', 'open').siblings('.desc').show();
};

… which will simply clear all other rel attributes on previously clicked/focused elements. I’m sure this would still need tweaking, but hopefully it points you in the right direction.