Question

I’m attempting to show some hidden content when a link is hovered. The content is unique per link. I have it working fine but I know the jQuery code is awful. I think “.this” is the secret but I can’t make it work. Any thoughts? This is the most ugly inefficient crap jQuery ever but I am trying to figure this out. Thanks!

jQuery

          $(document).ready
      (
        function(){
            $(".short-term-trigger").hover(function(){
             $(".short-term").toggleClass("visible");
             });
          }
    )

    $(document).ready
      (
        function(){
            $(".medium-term-trigger").hover(function(){
             $(".medium-term").toggleClass("visible");
             });
          }
    )

    $(document).ready
      (
        function(){
            $(".long-term-trigger").hover(function(){
             $(".long-term").toggleClass("visible");
             });
          }
    )

    $(document).ready
      (
        function(){
            $(".retirement-trigger").hover(function(){
             $(".retirement").toggleClass("visible");
             });
          }
    )

HTML

<ul id="goal-btns">
            <li><a class="short-term-trigger" href="#">Short-Term Gains</a></li>
            <li><a class="medium-term-trigger" href="#">Medium Term Goals</a></li>
            <li><a class="long-term-trigger" href="#">Long Term Goals</a></li>
            <li><a class="retirement-trigger" href="#">Retirement</a></li>
        </ul>

        <div class="talk-bubble hang-left short-term">
            <p class="bubble-text">I’ll need the money is less than 12 months.</p>
        </div><!--/short-gains-->

        <div class="talk-bubble hang-right medium-term">
            <p class="bubble-text">I don’t need the money immediately but may need it within the next 6-10 years.</p>
        </div><!--/short-gains-->

        <div class="talk-bubble hang-right long-term">
            <p class="bubble-text">I’m investing for the long-term.</p>
        </div><!--/short-gains-->

        <div class="talk-bubble hang-right retirement">
            <p class="bubble-text">I’m investing for my retirement.</p>
        </div><!--/short-gains-->

Answer 1

Try the following:

$(document).ready(function() {
    $('#goal-btns li a').hover(function() {
        var cls = this.className.replace('-trigger', '');
        $("."+cls).toggleClass("visible");
    });
})

http://jsfiddle.net/2NnX9/