JS Reveal/Hide toggle
<p>Just a quick one, hopefully. I've coded up this:</p>

<pre><code>&lt;script&gt;
$("div.design-project").css('display', 'none');
function InsertContent(tid) {
if(document.getElementById(tid).style.display == "none") {
    document.getElementById(tid).style.display = "block";
    }
else {
    document.getElementById(tid).style.display = "none";
    }
}
&lt;/script&gt;
</code></pre>

<p>Which, if a link has the href:</p>

<pre><code>href="javascript:InsertContent('design-project-1');"
</code></pre>

<p>it displays that div below. And if you click it again it disappears. Then if you click another link that say has the href:</p>

<pre><code>href="javascript:InsertContent('design-project-2');"
</code></pre>

<p>it'll display that div and so forth.</p>

<p>However, if you have one div open, and click on another anchor link to open another div, it doesn't close the one already open.</p>

<p>Any ideas? Also, if there's a better way to do this then please let me know.</p>

<p>Thanks,
R</p>

<p>Here is the HTML as requested:</p>

<pre><code>&lt;a class="design-projects-slides-title" href="javascript:insertDesignProjectContent('design-project-1');"&gt;Title of project&lt;/a&gt;

&lt;!-- start of .design-project --&gt;&lt;div class="design-project" id="design-project-1"&gt;
                &lt;div class="grid_6"&gt;&lt;div class="project-info-area"&gt;
                    &lt;h2&gt;Title of project&lt;/h2&gt;
                        &lt;p&gt;A rural retreat in the city. Built almost entirely from reclaimed element this little new-build timber cabin provides guest accommodation.&lt;p&gt;
                        &lt;p&gt;By coincidence a former chapel partition was found that matched the dimensions required. Used in their original painted condition, these doors became the front elevation and concertina open to one side - perfect for warm summer days. Further reclaimed elements include a bespoke curtain made from found patchwork, Victorian conservatory grills fitted over modern french heaters and industrial lights, taps, wash basin and an exposed shower fitting. Salvaged hardwood strip flooring and our Heathrow Terminal 2 stone fold from the floor to the walls. A thorough use of salvage all round!&lt;/p&gt;
                &lt;/div&gt;&lt;/div&gt;
                &lt;div class="grid_6 project-info-images"&gt;&lt;img src="http://placehold.it/460x540"&gt;&lt;/div&gt;
                &lt;div class="grid_6 project-info-images"&gt;&lt;img src="http://placehold.it/460x540"&gt;&lt;/div&gt;
                &lt;div class="grid_6 project-info-images"&gt;&lt;img src="http://placehold.it/460x540"&gt;&lt;/div&gt;
                &lt;div class="grid_12 project-info-images"&gt;&lt;img src="http://placehold.it/940x540"&gt;&lt;/div&gt;
                &lt;div class="grid_6 project-info-images"&gt;&lt;img src="http://placehold.it/460x540"&gt;&lt;/div&gt;
                &lt;div class="grid_6 project-info-images"&gt;&lt;img src="http://placehold.it/460x540"&gt;&lt;/div&gt;
                &lt;/div&gt;&lt;!-- end of .design-project --&gt;
</code></pre>

<p><strong>UPDATE</strong></p>

<p>In the end, I used a combination of your answers - thanks!</p>

<pre><code>&lt;!-- Reveal/hide sections on design projects/joinery --&gt;
&lt;script&gt;
/* This is for the 'choose a project' reveal/hide */
$("div.slider-content").css('display', 'block');
$(".design-projects-slides-title").click(function() {
    $(".slider-content").hide();
});
/* This is for reveal/hide on the product content */
$(".design-project").hide()
$('.design-projects-slides-title').click(function(){
    var id = $(this).attr('id')
    var content_id = id+"-content"
    $('#'+content_id).slideDown('slow')
});
$(".slider-trigger").click(function() {
    $(".design-project").hide();
});
&lt;/script&gt;
</code></pre>
