Combination of fading in/out multiple objects with different triggers

Question

this is my html. I am trying to create or/adapt a jquery script to fadein divs with "display:none;" when clicking a trigger. Divs being "projectx_container" (x being 1, 2 and 3) and trigger being "projectx_thumb" (x being 1, 2 and 3). I then want a separate close button to fadeout the div.

Also trying to achieve the same thing for the li elements a, b and c acting as triggers and divs being "x_container" (x being a, b and c). The a href is only there to mimic a cursor link effect.

<div id="container">
        <div id="content_area">

            <div id="project1_thumb"><a href=""><img src=""></a></div>
            <div id="project2_thumb"><a href=""><img src=""></a></div>
            <div id="project3_thumb"><a href=""><img src=""></a></div>

            <!-- HIDDEN PROJECT PAGES -->
            <div id="project1_container"></div>
            <div id="project2_container"></div>
            <div id="project3_container"></div>

            <!-- HIDDEN MENU PAGES -->
            <div id="a_container"></div>
            <div id="b_container"></div>
            <div id="c_container"></div>

        </div>
        <div id="nav_area">
            <div id="nav">
                <ul>
                    <li><a href="#">a</a></li>
                    <li><a href="#">b</a></li>
                    <li><a href="#">c</a></li>
                    <li><a href="#">d</a></li>
                </ul>
            </div>
        </div>
</div>

The script I have been trying to alter without success is, it seems to work for one div but I don't know how to make it work for multiple combinations or with the li elements:

<script>
$(document).ready(function(){ 
  $("#project1_thumb").click(function() { 
    $("#project1_container").fadeIn("250");
  });

  $("#close_project1").click(function() { 
    $("#project1_container").fadeOut("250"); 
  });
});
</script>

Here is some added css. Not the final version but it is pretty similar to what I am planning to use.

#container {
position: fixed;
display: block;
top:10px;left:10px;right:10px;bottom:10px;
vertical-align: center;
background: -webkit-linear-gradient(#FDC0B1, #EAA6C9); /* For Safari */
background: -o-linear-gradient(#FDC0B1, #EAA6C9); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#FDC0B1, #EAA6C9); /* For Firefox 3.6 to 15 */
background: linear-gradient(#FDC0B1, #EAA6C9); /* Standard syntax (must be last)*/ 

}

#project1_thumb {
float: left;
background-color: #ccc;
display: block;
width: 200px;
height: 200px;
margin: 20px;
}

#project2_thumb {
float: left;
background-color: #ccc;
display: block;
width: 200px;
height: 200px;
margin: 20px;
}

#project3_thumb {
float: left;
background-color: #ccc;
display: block;
width: 200px;
height: 200px;
margin: 20px;
}

#project1_container {
z-index: 900;
display: none;
position: fixed;
top:0px;left:0px;right:0px;bottom:0px;
vertical-align: center;
}

#project2_container {
z-index: 900;
display: none;
position: fixed;
top:0px;left:0px;right:0px;bottom:0px;
vertical-align: center;
}

#project3_container {
z-index: 900;
display: none;
position: fixed;
top:0px;left:0px;right:0px;bottom:0px;
vertical-align: center;
}

#a_container {
z-index: 900;
display: none;
position: fixed;
top:0px;left:0px;right:0px;bottom:0px;
vertical-align: center;
}

#b_container {
z-index: 900;
display: none;
position: fixed;
top:0px;left:0px;right:0px;bottom:0px;
vertical-align: center;
}

#c_container {
z-index: 900;
display: none;
position: fixed;
top:0px;left:0px;right:0px;bottom:0px;
vertical-align: center;
}

#nav_area {
clear: both;
display: block;
}

#navbar {
position: relative;
font-style: italic;
bottom: 35px;
}

#navbar a {
color: #381cdf;
text-decoration: none;
}

#navbar a:hover {
background-color: #fff;
}

#nav ul {
list-style: none;
}

#nav li {
display: inline;
margin-right: 15px;
margin-left: 15px;
font-size: 1.5em;
}

Answer 1

Several things to improve.

• Use classes! They save time and make everything easier. Instead of repeating the same code three times, apply a class to each element instead. It also makes using jQuery selector because I can use one $('.thumb').click as opposed to three $('#project1_thumb').clicks.
• Use data-attributes. They are handy for storing the names of elements that a click event is going to use, also lessening the amount of code that has to be written
• Avoid position:fixed unless you really want it to be in the same place at the same time, which I find hard with the code you gave.

Anyway, here is the full code I improved for you

/* HTML */
<div id="container">
    <div id="content_area">
        <div class='thumb' data-container='project1_container'><a href="#"><img src="/images/1"/></a>
        </div>
            <div class='thumb' data-container='project2_container'><a href="#"><img src="/images/2"/></a>
        </div>
            <div class='thumb' data-container='project3_container'><a href="#"><img src="/images/3"/></a>
        </div>

        <!-- HIDDEN PROJECT PAGES -->
        <div id="project1_container" class='container'>
            Proj 1
            <div class='close'>X</div>
        </div>
        <div id="project2_container" class='container'>
            Proj 2
            <div class='close'>X</div>
        </div>
        <div id="project3_container" class='container'>
            Proj 3
            <div class='close'>X</div>
        </div>

        <!-- HIDDEN MENU PAGES -->
        <div class='container'></div>
        <div class='container'></div>
        <div class='container'></div>
    </div>
    <div id="nav_area">
        <div id="nav">
            <ul>
                <li><a href="#">a</a></li>
                <li><a href="#">b</a></li>
                <li><a href="#">c</a></li>
                <li><a href="#">d</a></li>
            </ul>
        </div>
    </div>
</div>

/* CSS */
#container {
    position: fixed;
    display: block;
    top:10px;
    left:10px;
    right:10px;
    bottom:10px;
    vertical-align: center;
    background: -webkit-linear-gradient(#FDC0B1, #EAA6C9);
    /* For Safari */
    background: -o-linear-gradient(#FDC0B1, #EAA6C9);
    /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#FDC0B1, #EAA6C9);
    /* For Firefox 3.6 to 15 */
    background: linear-gradient(#FDC0B1, #EAA6C9);
    /* Standard syntax (must be last)*/
}
.thumb { 
    float: left;
    background-color: #ccc;
    display: block;
    width: 200px;
    height: 200px;
    margin: 20px;
    position:relat
}
.container {
    z-index: 9;
    display: none;
    position: fixed;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    vertical-align: center;
}
#nav_area { clear: both; display: block; }
#navbar {
    position: relative;
    font-style: italic;
    bottom: 35px;
}
#navbar a { color: #381cdf; text-decoration: none; }
#navbar a:hover { background-color: #fff; }
#nav ul { list-style: none; }
#nav li {
    display: inline;
    margin-right: 15px;
    margin-left: 15px;
    font-size: 1.5em;
}

.close { position:absolute; right:0; top:0; }

/* jQuery */
$(document).ready(function () {
    $(".thumb").click(function () {
        var id = $(this).data('container');
        $('#' + id).fadeIn("250");
    });
    $(".close").click(function () {
        $(this).parent().fadeOut("250");
    });
}); 

Demo

If you have any questions please don't hesitate to ask