JS Reveal/Hide toggle

Question

Just a quick one, hopefully. I've coded up this:

<script>
$("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";
    }
}
</script>

Which, if a link has the href:

href="javascript:InsertContent('design-project-1');"

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

href="javascript:InsertContent('design-project-2');"

it'll display that div and so forth.

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.

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

Thanks, R

Here is the HTML as requested:

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

<!-- start of .design-project --><div class="design-project" id="design-project-1">
                <div class="grid_6"><div class="project-info-area">
                    <h2>Title of project</h2>
                        <p>A rural retreat in the city. Built almost entirely from reclaimed element this little new-build timber cabin provides guest accommodation.<p>
                        <p>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!</p>
                </div></div>
                <div class="grid_6 project-info-images"><img src="http://placehold.it/460x540"></div>
                <div class="grid_6 project-info-images"><img src="http://placehold.it/460x540"></div>
                <div class="grid_6 project-info-images"><img src="http://placehold.it/460x540"></div>
                <div class="grid_12 project-info-images"><img src="http://placehold.it/940x540"></div>
                <div class="grid_6 project-info-images"><img src="http://placehold.it/460x540"></div>
                <div class="grid_6 project-info-images"><img src="http://placehold.it/460x540"></div>
                </div><!-- end of .design-project -->

UPDATE

In the end, I used a combination of your answers - thanks!

<!-- Reveal/hide sections on design projects/joinery -->
<script>
/* 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();
});
</script>

Answer 1

Use jQuery toggle to achieve what you are trying to do. e.g.

function InsertContent(tid) {
    $('#'+tid).toggle()
}

Another improvement you should do is that instead of hardcoding the id in each href, just add a class to element, override onclick of element and toggle related content. To get related content you can use a nomenclature e.g. if you use id='myid' for anchor, use id="myid_content" for content, so in click function you can toggle content e.g.

HTML:

<a class="content-link" id="myid">click me</a>
<div id="myid_content">
Here is the content
</div>

JavaScript:

$('.content-link').click(function(){
    var id = $(this).attr('id')
    var content_id = id+"_content"
    $('#'+content_id).toggle()
}

Here is a working sample on jsFiddle

Better still is to keep clickable link and content inside a div, so that you don't need to set id, just set some classes and with parent and child relations you can get what is content e.g.

HTML

<div class="content-wrap">
<a class="content-link" >Click Me</a><br/>
<div class="content">
Here is the content for click me
</div>
</div>

JavaScript:

$('.content-link').click(function(){
    var id = $(this).parent().find(".content).toggle()
})​

See it in action here

Answer 2

First of all i see that you use jQuery so why not use it to achieve the entire flow?

You could do something like:

$(".mydivclass").click(function(){
   $(".mydivclass").hide();
   $(this).show();
})

Answer 3

HTML

<a id="id1" href="#" rel="divContent1" >First</a><br/>
<a id="id2" href="#" rel="divContent2">Second</a><br/>


<div id="divContent1" class="content">
    Content of Div 1
</div>
<div id="divContent2" class="content">
    Content of Div2
</div>​

Javascript

$(function(){
   $(".content").hide();
    $("a").click(function(e){
      e.preventDefault()
      var divToShowId=$(this).attr("rel");

       $(".content").hide();
       $("#"+divToShowId).show();   

    });     

})​

I used the id of Content divs as the rel attribute value of links as we need some way to connect a link with its content.

Here is the working demo : http://jsfiddle.net/Kx9Ma/5/