Need help for jQuery portfolio script
<p>I am creating a portfolio page for my site. I want to display my works on my site, so I have this idea in my mind.</p>

<p>I will display all my works as images say 10 images. If anyone click on the particular thumbnail image, all the thumbnails will be faded out and the details about the work or project will be displayed on the page. Now they can click on "close" so that the current work will disappear and all the thumbnails will reappear.</p>

<p>I have achieved this using the following:</p>

<p><strong>HTML Code looks like this</strong></p>

<pre><code>&lt;div class="container project_container"&gt;
    &lt;div class="four columns project proj1"&gt;
        &lt;img src="http://placehold.it/220x220" /&gt;&lt;/li&gt;
    &lt;/div&gt;&lt;!-- End three columns --&gt;

    &lt;div class="four columns project proj2"&gt;
        &lt;img src="http://placehold.it/220x220" /&gt;&lt;/li&gt;
    &lt;/div&gt;&lt;!-- End three columns --&gt;

    &lt;div class="four columns project proj3"&gt;
        &lt;img src="http://placehold.it/220x220" /&gt;&lt;/li&gt;
    &lt;/div&gt;&lt;!-- End three columns --&gt;

    &lt;div class="four columns project proj4"&gt;
        &lt;img src="http://placehold.it/220x220" /&gt;&lt;/li&gt;
    &lt;/div&gt;&lt;!-- End three columns --&gt;
&lt;/div&gt;&lt;!-- End Container --&gt;

&lt;!-- Project 1 to be displayed when all thumbnails are hidden --&gt;
&lt;div id="project1" class="container project_description"&gt;
    &lt;div class="eight columns project_image"&gt;
        &lt;p&gt;This is an eight column text for image&lt;/p&gt;
    &lt;/div&gt;&lt;!-- End Eight Columns --&gt;

    &lt;div class="eight columns project_details"&gt;
        &lt;p&gt;This is an eight column text&lt;/p&gt;
        &lt;a href="#" class="close"&gt;Close&lt;/a&gt;
    &lt;/div&gt;&lt;!-- End Eight Columns --&gt;
&lt;/div&gt;&lt;!-- End Container project description --&gt;
</code></pre>

<p><strong>jQuery Code looks like this:</strong></p>

<pre><code>$('.project_description').hide();

$('.proj1').click(function(){
   $('.project').fadeOut('fast', function(){
     $('#project1').fadeIn('fast');
   });
});

$('.close').click(function(){
    $('#project1').hide();
    $('.project').fadeIn('fast');
});
</code></pre>

<p>My question now is, suppose I have 20 projects to put on my site or what if I add them at later time? Do I need to keep adding the code in my custom.js file like this?</p>

<pre><code>$('.proj2').click(function(){
   $('.project').fadeOut('fast', function(){
     $('#project2').fadeIn('fast');
   });
});

$('.close').click(function(){
    $('#project2').hide();
    $('.project').fadeIn('fast');
});
</code></pre>

<p>and so on changing proj2 to proj3,4,5,6..... and project2 to 3,4,5 etc.,?</p>

<p>Do I have any easy method to achieve this? I mean to ask without repeating the same code with minor changes do I have a way to achieve the above method?</p>

<p>Any help is appreciated.
Cheers!</p>
