CODEWITHSUNDEEP
jqueryhtmlhideshow
Brian
Brian

Reputation: 2051

Hiding/Showing Contents inside a <div> using jQuery

I was wondering what I'm doing wrong.

Basically I want to show and hide text within a div when I hover over an image(depending on which image).

jQuery:

$(document).ready(function() {
    $('.project_desc_1','.project_desc_2').hide();

    $('#project1').hover(function() {
        $('.project_desc_1').show();
    }, function() {
        $('.project_desc_2').hide();
    });

    $('#project2').hover(function() {
        $('.project_desc_2').show();
    }, function() {
        $('.project_desc_1').hide();
    });

HTML:

<div class="current_projects">
    <h1>Current Projects</h1>

    <div class="projects_gallery" align="center">

        <img src="./images/blivori.png"/ id="project1">
        <img src="./images/blivori.png"/ id="project2">

        <div class="project_desc_1">
            Project Description 1
        </div>

        <div class="project_desc_2">
            Project Description 2
        </div>

    </div>

</div>

Upvotes: 0

Views: 9996

Answers (4)

drew_w
drew_w

Reputation: 10430

Maybe you are looking for something like the following:

$(document).ready(function() {
    $('.project_desc_1, .project_desc_2').hide();

    $('#project1').hover(function() {
        // when the mouse ENTERS the image
        $('.project_desc_1').show();
        $('.project_desc_2').hide();
    }, function() {
        // when the mouse LEAVES the image
        $('.project_desc_1').hide();
    });

    $('#project2').hover(function() {
        // when the mouse ENTERS the image
        $('.project_desc_1').hide();
        $('.project_desc_2').show();
    }, function() {
        // when the mouse LEAVES the image
        $('.project_desc_2').hide();
    });
}

The code should hide the div that is irrelevant on enter and hide the relevant div on leave. Try this out and see if it works!

In case you would like to see this working - check out the following JSFiddle: http://jsfiddle.net/kZPQp/

Upvotes: 1

Mike Brant
Mike Brant

Reputation: 71384

You should probably simplify things and get rid of the project1/project2 business. This is not friendly to the way you do things in jQuery.

I would suggest this HTML:

<div class="current_projects">
    <h1>Current Projects</h1>
    <div class="projects_gallery" align="center">
        <img src="./images/blivori.png"/ class="project_trigger">
        <img src="./images/blivori.png"/ class="project_trigger">
        <div class="project_desc">
            Project Description 1
        </div>
        <div class="project_desc">
            Project Description 2
        </div>
    </div>

With the following jQuery

$(document).ready(function() {
    $('.project_desc').hide();  // Personally I would hide in CSS such that this step is not needed and possible flashing of content before onload wouldn't happen

    $('.project_trigger').hover(
        function() {
            var i = $('.project_trigger').index(this);
            // hide all descriptions
            // then show only description with index position
            // matching index position of trigger
            $('project_desc').hide()
                .eq(i)
                .show();
        },
        function() {
            // hide all descriptions
            $('project_desc').hide();
        }
    );
});

This is much more scalable and allows any number of trigger items and target items without you having to change your javascript. Of course the number of triggers and descriptions should be equal and the order of these would be important.

Upvotes: 1

Kiran
Kiran

Reputation: 20313

Hope you are trying to show description based on image like Hover project1 show project_desc_1 and Hover project2 show project_desc_2.

You have few things missing here:

  1. change $('.project_desc_1', '.project_desc_2').hide(); to $('.project_desc_1, .project_desc_2').hide();

  2. Change this html code

from:

<img src="./images/blivori.png/" id="project1">
<img src="./images/blivori.png/" id="project2">

to

<img src="./images/blivori.png" id="project1">
<img src="./images/blivori.png" id="project2">

Try this:

$(document).ready(function() {
        $('.project_desc_1, .project_desc_2').hide();

     $('#project1').hover(function() {
       $('.project_desc_1').show();
         $('.project_desc_2').hide();
      });

    $('#project2').hover(function() {
     $('.project_desc_2').show();
    $('.project_desc_1').hide();
            });
});

DEMO

Upvotes: 1

Tai
Tai

Reputation: 167

It appears that you're missing a pair of closing braces after the second hover function.

Upvotes: 1

Related Questions