Show Hide Div In One Area

I have been looking all day to try and find something that matches what I want but I cant find anything anywhere. I want to create a show hide div that shows / hides the div in one

Solution 1:

To expand a bit on richardneililagan answer...

Here is a bit of extra HTML and some JS:

<div id="leftpane">
    <img class="thumb" id="img_1" />
    <img class="thumb" id="img_2"/>
    <img class="thumb" id="img_3"/>
    <img class="thumb" id="img_4"/>
</div>
<div id="rightpane">
     <div id="prof_1" class="profile">Profile for image 1</div>
     <div id="prof_2" class="profile">Profile for image 2</div>
        <!-- etc -->
</div>

Then you can have somehting like this to handle your events:

$(".thumb").click(function() {
      var id = $(this).attr("id").split("_").pop();
      $(".profile").fadeOut();
      $("#prof_" + id).fadeIn();
}

Hope that helps!

Edit

Ok, based on the code I wrote before, this is working (tested here: http://jsfiddle.net/deleteman/94jQS/)

HTML

<div id="leftpane">
    <a class="thumb" href="#"><img id="img_1" src="http://img1.jarfil.net/3/test_iq-pixels_5x5_v1-a.png"/></a>

    <a class="thumb" href="#"><img id="img_2" src="http://www.kriptopolis.org/images/clasifica.jpg"/></a>

    <a class="thumb" href="#"><img  id="img_3" src="http://www.blogdetrabajo.com/wp-content/uploads/test.jpg"/></a>

</div>
<div id="rightpane">
     <div id="prof_1" class="profile">Profile for image 1</div>
     <div id="prof_2" class="profile">Profile for image 2</div>
    <div id="prof_3" class="profile">Profile for image 3</div>
</div>

CSS

a.thumb img { 
    width:100px;

}
.profile {
    display:none;
}

JS

$(".thumb").click(function() {
      var id = $(this).children("img").first().attr("id").split("_").pop();

    $(".profile").fadeOut('slow'); 
    $("#prof_" + id).fadeIn();
    return false;

});

Is that better now? Would that work for you?

Solution 2:

That would be pretty easy if you've got HTML structured like a grid.

<div id="leftpane">
    <img class="thumb" />
    <img class="thumb" />
    <img class="thumb" />
    <img class="thumb" />
</div>
<div id="rightpane">
    <!-- and the profile information goes here -->
</div>

... 'cause that way, you can just target that whole #rightpane with a jQuery selector.

$('#rightpane').children().hide();

Solution 3:

There's a bunch of ways you could achieve this.

You could store all the information you want to display in the full-sized window in a data object (for instance, an array containing objects, the objects have fields for title, desription text, and image.)

Then you generate the thumbnails so that when you click on them, they call a function that takes an index of the array as an arguement. You can then generate new HTML using some string substitution method and insert it into the full-sized div (after removing the old content) by using InnerHTML.

Solution 4:

Need some imprvment, but u get the idea, I think.

http://jsfiddle.net/qS5U5/

Solution 5:

I didn't look at the source code of the example site you ghave, but it's unlikely that there are multiple divs that are hidden and shown, it's probably just one div, which is hidden, then the innerHTML is changed and then faded-in.

It should be something like

$("#theDivThatIsClicked").click(function()
{
    $("#theDivThatWillContainTheText").hide(function()
    {
    $(this).html("add some text").show()
    })
});