Click function that opens and closes

Question

I am trying to code something like this one on http://teamgeek.co.za/#who

I already had the code on the gif and div that will show the description on the bottom of each picture selected. The problem is that if I clicked on the second row, the opened description on the first row won't automatically close itself.

Here is my script that I used.

<script>
        $("#items a").click(function() {
        var id = $(this).attr("id");
        $("#pages div#" + id + "").toggle("slow").siblings().hide("slow");
    });
</script>
<script>
        $("#items2 a").click(function() {
        var id = $(this).attr("id");
        $("#pages2 div#" + id + "").toggle("slow").siblings().hide("slow");
    });
</script>    

This is the full code that I used, and I am using the javascript above to get the functions:

<!-- Team Grid  --><section class="main">
    <div id="items">
        <div class="item">
            <a id="1" class="work">
                <img class="media" src="img/tryimages/greggy.png"/>
                <div class="content">
                <img class="media" src="img/tryimages/greggy.gif"/>
                <!--<h2 class="title">Click</h2>!-->
                </div>
            </a>
        </div>

        <div class="item">
            <a id="2" class="work page-scroll">
                <img class="media" src="img/tryimages/dennise.png"/>
                <div class="content">
                <img class="media" src="img/tryimages/dennise.gif"/>
                </div>
            </a>
        </div>

        <div class="item">
            <a id="3" class="work page-scroll">
                <img class="media" src="img/tryimages/jm.png"/>
                <div class="content">
                <img class="media" src="img/tryimages/jm.gif"/>
                </div>
            </a>
        </div>

        <div class="item">
            <a id="4" class="work page-scroll">
                <img class="media" src="img/tryimages/hannah.png"/>
                <div class="content">
                <img class="media" src="img/tryimages/hannah.gif"/>
                </div>
            </a>
        </div>
    </div>
</section><!-- End of Works Grid  -->
        <div id="pages">
            <div id="1" class="mydivhide">
            <h1>Greggy Rick Go</h1><h4>/Chief Executive Officer</h4>
            </div>
            <div id="2" class="mydivhide">
            <h1>Dennise Recuerdo</h1><h4>/Secretary</h4>
            </div>
            <div id="3" class="mydivhide">
            <h1>Jude Marlon Alegro</h1><h4>/Head Web Developer</h4>
            </div>
            <div id="4" class="mydivhide">
            <h1>Hannah Lois Aliposa</h1><h4>/Head Content Writer</h4>
            </div>
        </div>


        <!-- Team Grid  --><section class="main">
    <div id="items2">
        <div class="item">
            <a id="5" class="work page-scroll">
                <img class="media" src="img/tryimages/rd.png"/>
                <div class="content">
                <img class="media" src="img/tryimages/rd.gif"/>
                </div>
            </a>
        </div>

        <div class="item">
            <a id="6" class="work page-scroll">
                <img class="media" src="img/tryimages/soc.png"/>
                <div class="content">
                <img class="media" src="img/tryimages/soc.gif"/>
                </div>
            </a>
        </div>

        <div class="item">
            <a id="7" class="work page-scroll">
                <img class="media" src="img/tryimages/anj.png"/>
                <div class="content">
                <img class="media" src="img/tryimages/anj.gif"/>
                </div>
            </a>
        </div>

        <div class="item">
            <a id="8" class="work page-scroll">
                <img class="media" src="img/tryimages/ian.png"/>
                <div class="content">
                <img class="media" src="img/tryimages/ian.gif"/>
                </div>
            </a>
        </div>
      </div>
    </section><!-- End of Works Grid  -->
    <div id="pages2">
            <div id="5" class="mydivhide">
            <h1>Ruth Danielle Aliposa</h1><h4>/Head Web Designer</h4>
            </div>
            <div id="6" class="mydivhide">
            <h1>Christopher Emmanuel Socong</h1><h4>/Web Developer</h4>
            </div>
            <div id="7" class="mydivhide">
            <h1>Angineth Bantiles</h1><h4>/Web Content Writer</h4>
            </div>
            <div id="8" class="mydivhide">
            <h1>Ian Kevin Mendova</h1><h4>/Web Developer</h4>
            </div>
        </div>
 </div>
</section>

Answer 1

Below code optimization of toggle for your issue

you have set class as .row-data for each row and the and write below script..

<script>
    $(".row-data a").click(function() {
    $(".row-data").hide("slow");
    $(this).parent().show("slow");
  });
</script>

Note: remove your Script...

Answer 2

If you want to go with this code you should maybe use this:

<script>
    $("#items a").click(function() {
      var id = $(this).attr("id");
      $("#pages div, #pages2 div").siblings().hide("slow");
      $("#pages div#" + id + "").toggle("slow");
    });
</script>

I'm not sure if I understand the snippet correctly since I don't know the rest of your code :-) However, this isn't a good way to solve your issue. As in the comments already mentioned, it's a lot better to handle it with classes. Here is a jsfiddle which can easily solve your problem: JSFiddle

However you might only change the effect, but this is a minor thing.