Open one div per call (html) : I'd like that when I open a div, all the others close himself. I've looked for around and I found only answer with jquery and not javascript.

The problem is that I'm still learning javascript and I don't know jquery at all so I'm not be able to implement it in my code.

This is my html (css is at the end)

    <html>
    <div class="row_team_pic" id="riga1">
      <div class="container">
		<div class="photo">
			<img src="#" alt="" width="125" height="125"/>
		</div>
		<div class="name" onclick="openDescription('description1')">Name1</div>
		<div class="description1" id="description1_id" style="display:none">
			It's ok. It's working. It's ok. It's working. It's ok. It's working. 
            It's ok. It's working. It's ok. It's working. 
		</div>
	</div>

	<div class="container">
		<div class="photo">
			<img src="#" alt="" width="125" height="125"/>
		</div>
		<div class="name" onclick="openDescription('description2_id')">Name2</div>
		<div class="description2" id="description2_id" style="display:none">
			It's ok. It's working. It's ok. It's working. It's ok. It's working. 
            It's ok. It's working. It's ok. It's working. 
		</div>
	</div>

	<div class="container">
		<div class="photo">
			<img src="#" alt="" width="125" height="125"/>
		</div>
		<div class="name" onclick="openDescription('description3_id')">Name3</div>
		<div class="description3" id="description3_id" style="display:none">
			It's ok. It's working. It's ok. It's working. It's ok. It's working. 
            It's ok. It's working. It's ok. It's working. 
		</div>
	</div>

	<div class="container">
		<div class="photo">
			<img src="#" alt="" width="125" height="125"/>
		</div>
		<div class="name" onclick="openDescription('description4_id')">Name4</div>
		<div class="description4" id="description4_id" style="display:none">
			It's ok. It's working. It's ok. It's working. It's ok. It's working. 
            It's ok. It's working. It's ok. It's working. 
		</div>
	</div>

I would like that when I click on a name the description div open and close.
I wrote this javascript that should do this

    <script>
    function openDescription(description_id) {
        var x = document.getElementById(description_id);
            if (x.style.display === "block") {
                x.style.display = "none";
            } else {
                x.style.display = "block";
            } 
       };
    </script>

Obviously this javascript code don't do all I want. For example if I click on name2 it give me the description2, but if I click on name3 it doesn't close the description2 but overlap only.
How should I improve it? Consider that I could have a lot of this module (I don't know how many I have) so I can't put all of them

Here is CSS

    .row_team_pic{
	    text-align:center;
	    margin:-72px;
	    margin-top:0px;
	    margin-bottom: 15px;
    }
    .container{
	    background-color:silver;
        width:150px;
        display:inline-block;
	    margin-top:0px;
	    margin-left:10px;
    }

    .photo{
        min-height:125px;
        width:125px;
        margin:10px;
        padding-top:10px;  
    }

    .name{
	    text-align: center;
        padding-bottom: 10px;
	    cursor: pointer;
    }
    .description1{
	    float:left;
	    margin-left:0%;
	    margin-top:10px;
	    background-color:silver;
	    width:322px;
    }
    .description2{
	    float:left;
	    margin-left:-57%;
	    margin-top:10px;
	    background-color:silver;
	    width:322px;
    }
    .description3{
	    float:left;
	    margin-left:-57%;
	    margin-top:10px;
	    background-color:silver;
	    width:322px;
    }
    .description4{
	    float:left;
	    margin-left:-114%;
	    margin-top:10px;
	    background-color:silver;
	    width:322px;
    }

Thanks for the help.