I have set a background image on the body, and positioned a large box, footer, navigation bar, and header above it.
In order to add functionality to slide these elements up and down, I've created two buttons with classes 'slideUp' and 'slideDown'. The 'slideUp' button features an arrow pointing upwards while the 'slideDown' button has an arrow pointing downwards.
Upon clicking the 'slideUp' button, the box, footer, nav, and header will slide up and disappear. Clicking the 'slideDown' button reverses this action by sliding everything back down.
To toggle between showing the 'slideUp' button and 'slideDown' button based on visibility of elements, I've used an if statement. When all elements are visible, the 'slideUp' button is displayed and the 'slideDown' button is hidden. Conversely, when all elements are hidden, the 'slideDown' button is shown and the 'slideUp' button is hidden.
While the initial transition works smoothly, there seems to be an issue with the 'else if' condition not functioning as expected. After clicking the 'slideUp' button, the 'slideDown' button fails to appear as intended. This page utilizes jQuery for the slideUp and slideDown functionalities.
$("button#Up").click(function() {
$(".box").slideUp("medium");
$("nav").slideUp("medium");
$("header").slideUp("medium");
$("footer").slideUp("medium");
});
$("button#Down").click(function() {
$(".box").slideDown("medium");
$("nav").slideDown("medium");
$("header").slideDown("medium");
$("footer").slideDown("medium");
});
if ($(".box").is(":visible") && $("nav").is(":visible") && $("header").is(":visible") && $("footer").is(":visible"))
{
$("button#Up").show("fast");
$("button#Down").hide("fast");
}
else if ($(".box").is(":hidden") && $("nav").is(":hidden") && $("header").is(":hidden") && $("footer").is(":hidden"))
{
$("button#Up").hide("fast");
$("button#Down").show("fast");
}button.slideUp{
background-image: url(arrowUp.png);
background-size: cover;
background-position: center;
background-color: #1A1A1A;
opacity: 0.75;
height: 41px;
width: 41px;
position: fixed;
right: 2px;
bottom: 0px;
}
button.slideDown{
background-image: url(arrowDown.png);
background-size: cover;
background-position: center;
background-color: #1A1A1A;
opacity: 0.75;
height: 41px;
width: 41px;
position: fixed;
right: 2px;
top: 0px;
}<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<button id="Up" class="slideUp"></button>
<button id="Down" class="slideDown"></button>