Hide/show div, what am i doing wrong

Question

im trying to build a gallery that loads a div with images when a button i clicked.

the problem is that when i have 2 buttons only the last images are clickable, a little hard to explain but you can try it out on my page: http://www.bravitus.com/#gallery

is it wrong having two javascrips like that

script1 :

<script type="text/javascript">
 $(document).ready(function(){
    $(".slidingpriv").hide();
    $(".show_priv").show();
    $('.show_priv').click(function(){
    $(".slidingpriv").slideToggle();
    });

});

script2:

<script type="text/javascript">


$(document).ready(function(){    
    $(".slidinggf").hide();
    $(".show_gf").show();
    $('.show_gf').click(function(){
    $(".slidinggf").slideToggle();
    });    
});

html:

<div class="row">

<div class="container">

        <!---section--->

        <div class="center">
        <a href="#show_priv" class="show_priv">Private projects</a>
        </div>
        <div class="slidingpriv">

        <a href="pages/inasecond/inasecond.html"><div id="imgstyle" class="image"> 
        <img href="" src="img/inasecond.jpg" width="300" height="300"  alt=""/></a> 
        </div>

        <a href="pages/2012/2012.html"><div id="imgstyle" class="image">
        <img src="img/2012.jpg" width="300" height="300"  alt=""/> </div></a>

        <a href="pages/greenlights/greenlights.html"><div id="imgstyle" class="image">
        <img src="img/Cover-text.jpg" width="300" height="300"  alt=""/> </div> </a> 

        </div>

        <!---section--->

        <div class="center">
        <a href="#show_gf" class="show_gf">Grundforløb</a>
        </div>

        <div class="slidinggf">

        <a href="pages/inasecond/inasecond.html"><div id="imgstyle" class="image"> 
        <img href="" src="img/inasecond.jpg" width="300" height="300"  alt=""/></a> 
        </div>

        <a href="pages/2012/2012.html"><div id="imgstyle" class="image">
        <img src="img/2012.jpg" width="300" height="300"  alt=""/> </div></a>

        <a href="pages/greenlights/greenlights.html"><div id="imgstyle" class="image">
        <img src="img/Cover-text.jpg" width="300" height="300"  alt=""/> </div> </a> 

        </div>

css:

    .center{
    position:relative;
    width:100%;
    height:100%;
    margin:0 auto;
    text-align:center;
    /*background-color:#0C3;*/
}    
    .show_priv {
    display:none;
    position:relative;
    height:100%;
    /*background-color: #99CCFF;*/

}

    .slidinggf {
    height:100%;
    /**background-color: #99CCFF;**/
    width:100%;
    position:relative;
}

    .show_gf {
    display:none;
    position:relative;
    height:100%;
    /*background-color: #99CCFF;*/
}
    .slidingpriv {
    height:100%;
    /**background-color: #99CCFF;**/
    width:100%;
    position:relative;
}

Thanks ;)

Answer 1

You should look at using your browser developer tools which has some very easy to use tools for debugging, such as the inspect element.

https://developer.chrome.com/devtools

https://developer.mozilla.org/en-US/docs/Tools

With this you can find what may be blocking your ability to click on some elements, even if you're sure they should work.

Also try to combine scripts into the same document ($(document).ready(function(){});)