CODEWITHSUNDEEP
javascriptjqueryhtmlcss
EricC
EricC

Reputation: 1

Toggle button when objects are shown or hidden

I have a background image on the body and then above the image I have a big box, footer, nav and header.

I am trying to implement a button which is linked to a class called slideUp. This class has an image of an arrow pointing upwards.

When I click on this button the box, footer, nav and header will slide up and disappear. Then I have another button with another class called slideDown where I have an image of an arrow pointng downwards. When I click on this button everything will slide back down.

Instead of both buttons showing at all time I want to use a if statement, when everything is visible, show buttonUp, hide buttonDown and when everything is hidden, show buttonDown and hide buttonUp.

The first part works fine, it shows buttonUp and hides ButtonDown but the the 'else if' doesn't work. After I have clicked the buttonUp it does not hide and the buttonDown does not show. I'm using jQuery for the slideUp and slideDown features. 

$("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>

Upvotes: 0

Views: 95

Answers (1)

mplungjan
mplungjan

Reputation: 177860

You mean this?

$("button#Up").click(function() {
 $(".box").slideUp("medium");
 $("nav").slideUp("medium");
 $("header").slideUp("medium");
 $("footer").slideUp("medium");
 $("button#Down").show();
 $(this).hide();
});

$("button#Down").click(function() {
 $(".box").slideDown("medium");
 $("nav").slideDown("medium");
 $("header").slideDown("medium");
 $("footer").slideDown("medium");
 $("button#Up").show();
 $(this).hide();
});

It can all be implemented with one button, toggleClass and toggleSlide

$("button").on("click",function() {
 $(this).toggleClass("slideUp slideDown");
 $(".box").toggleSlide("medium");
 $("nav").toggleSlide("medium");
 $("header").toggleSlide("medium");
 $("footer").toggleSlide("medium");
});

Upvotes: 0

Related Questions