I am in the process of creating a gallery that will display a div with images when a button is clicked.
The issue I am facing is that when I have two buttons, only the last images are clickable. It's a bit difficult to explain, but you can see it in action on my website:
Is it incorrect to have two scripts like this?
Script 1:
<script type="text/javascript">
$(document).ready(function(){
$(".slidingpriv").hide();
$(".show_priv").show();
$('.show_priv').click(function(){
$(".slidingpriv").slideToggle();
});
});
Script 2:
<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;
}
Thank you! ;)