I have implemented jQuery on my webpage to load content without refreshing, displaying only the necessary information. Within the gallery section, there are links for "Other Photography" and "Nude Art". Clicking on these links initializes the gallery with the respective pictures. However, once one of the galleries is initialized, there is no way to hide it to make room for the other.
To distinguish between the two galleries, I created two ul li lists with images using the same id for CSS, but different classes.
<div id="underage">
<ul class="galleryShow">
...
</ul>
</div>
<div id="adult">
<ul class="galleryShow">
...
</ul>
</div>
Here is the jQuery code snippet:
$('#galleryButton').click(function() {
$('.mainBody').slideUp().ready(function() {
$('#gallery').slideDown(600).ready(function() {
$('#otherPhotoButton').click(function() {
/*$('.adult').hide();*/
$('.underage').galleryView();
});
$("#nudeButton").confirm({
text: "Are you over 18?",
confirm: function(button) {
/*$('.undergage').hide();*/
$('.adult').galleryView();
},
cancel: function(button) {
window.location.href = "https://www.google.hu/search?q=puppies";
},
confirmButton: "Yes I am",
cancelButton: "No"
});
});
});
});