jquey/css question slide toggle up

I have used the following code to to have a mousever/click slide down.  Now I want to it slide up.  I cant figure out out it knows to slide up or down?

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script> 
$(document).ready(function(){
    $("#flip").click(function(){
		$('#panel').slideToggle("slow");
    });
});
</script>

<style>
#flip {
	float:right;
	-webkit-border-radius: 0px 0px 30px 30px;
    -moz-border-radius: 0px 0px 30px 30px;
     border-radius: 0px 0px 30px 30px;
	 background-color:#25BDC1;
}
#panel, #flip {
    padding: 5px;
    text-align: center;
	width: 250px
}
#panel {
    display: none;
}
</style>
<div id="flip">Click to slide the panel down or up
   <div id="panel">Hello world!</div>
</div>                                 

Open in new window

a204801Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Tom BeckCommented:
SlideToggle just does the opposite of whatever the current state is. To force a slide up you could say:

$('#panel').slideUp("slow");

SlideToggle works by animating the height of the target from 0 to whatever and from whatever to 0. Then it adds display:none when up, display:block when down.
0
a204801Author Commented:
Hmm. So I tried that with this, to no avail:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script> 
$(document).ready(function(){
    $("#flip2").click(function(){
		$('#panel2').slideUp("slow");
    });
});
</script>

<style>
#flip2 {
background-color:#25BDC1;
}
#panel2, #flip {
    padding: 5px;
    text-align: center;
    width: 250px
}
#panel2 {
    display: none;
}
</style>
<div id="flip2">Click to slide the panel down or up
   <div id="panel2">Hello world!</div>
</div>

Open in new window

0
Tom BeckCommented:
It cannot slide up until it is down and visible. Panel2 is set to display:none in the css. The slideToggle(), slideUp() and slideDown() functions change that to display:block when they are called.

Maybe a better explanation of what your goal is would be a good idea.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

a204801Author Commented:
Fair point.  In the footer of my page, I have a bar above that will have a link that when clicked will pop-up the slide.  In that slide will be a video.  So basically, a link that says "Watch Video".  You click on it, the video slides up and you can watch.
0
Tom BeckCommented:
Ahhh! I totally misinterpreted the question. The slideToggle() function is a shortcut function for animate() and show() / hide() but it only works to slide down from a given element, not up. We need to write out the animate() function long hand.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>

<body>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script> 
$(document).ready(function(){
    $("#flip2").click(function(){
		if ($('#panel2').is(':visible')) {
			$('#panel2').animate({
				top: 0,
				height: 0
			}, 1000, function(){
				$(this).hide();
			});
		} else {			
			$('#panel2').show().animate({
				top: '-300px',
				height: '300px'
			}, 1000);
		}
    });
});
</script>

<style>
#flip2 {
	position:relative; 
	top:400px;/* to make room for the slide up demo */
    padding: 5px 0;
}
#panel2, #flip2 {
	background-color:#25BDC1;
    text-align: center;
    width: 250px
}
#panel2 {
	position:absolute;
    display: none;
	height: 0;
	top:0;
	
}
</style>
<div id="flip2">Click to slide the panel down or up
   <div id="panel2">Hello world!</div>
</div>                      
</body>
</html>

Open in new window

0
a204801Author Commented:
I just tested on its own, this is pretty much what I wanted.  I guess I didn't realize the normal jquery wouldn't allow this.  Let me try and implement and see if any issues.  I think this does the trick though.  I will award the points and close this once I implement.  Thanks!
0
a204801Author Commented:
The only issue is that its pinned to bottom of the browser window.  I dont want to put the URL on this forum, otherwise I would show you what I mean.  Maybe I can create a URL that is temporary?
0
a204801Author Commented:
Actually, I experimented a bit, now it seems to be working as expected.
0
a204801Author Commented:
Maybe this is a separate question, but is there a way to make the "Click to slide the panel down or up" text change depending on if its slid open or closed?
0
Tom BeckCommented:
It's jQuery. You can do that easily. You need to put the text in a span tag to isolate it from the div that's already inside the flip2 div.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>

<body>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script> 
$(document).ready(function(){
    $('#flip2').click(function(){
		if ($('#panel2').is(':visible')) {			
			$('#panel2').animate({
				top: 0,
				height: 0
			}, 1000, function(){
				$('#flip2 span').text('Click to slide the panel up');
				$(this).hide();
			});
		} else {		
			$('#panel2').show().animate({
				top: '-300px',
				height: '300px'
			}, 1000, function(){				
			   $('#flip2 span').text('Click to slide the panel down');	
			});
		}
    });
});
</script>

<style>
#flip2 {
	position:relative; 
	top:400px;/* to make room for the slide up demo */
    padding: 5px 0;
}
#panel2, #flip2 {
	background-color:#25BDC1;
    text-align: center;
    width: 250px
}
#panel2 {
	position:absolute;
    display: none;
	height: 0;
	top:0;
	
}
</style>
<div id="flip2"><span>Click to slide the panel up</span>
   <div id="panel2">Hello world!</div>
</div>                      
</body>
</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
a204801Author Commented:
I'm actually flipping between 2 images, rather than text.  Just adding an img tag to replace text doesnt really work.

Cleary its a syntax issue.  So, what am I missing?

IMG:
<img src="/sites/default/files/video.png">
0
a204801Author Commented:
never mind.  I figured it out :

$('#flip2 span').html( '<img src="/sites/default/files/video.png">' );
0
Tom BeckCommented:
That works. Or you could just change the src of the existing <img> tag.

$('#flip2 span img').attr( 'src', '/sites/default/files/video.png' );

Thanks for the points.
0
a204801Author Commented:
Not sure if you will see this, but I was wondering if there was a way to have the "hidden" piece peeking out a bit.  Say the top 30px of it be peeking above the turquoise bar?  See png below.  If this is a re-do of the code, I will start a new question.

Let me know.
example.png
0
Tom BeckCommented:
That is surprisingly a very different situation. You cannot rely on show() and hide() since part of the sliding div is exposed at all times. Then, is(':visible') no longer works as the conditional. Instead I check the height. As for layout, you have to use z-index to put the sliding div behind the parent. Also, the trigger is now the round button image instead of the parent div.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>

<body>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script> 
$(document).ready(function(){
    $('#click').click(function(){
		if ($('#panel2').css('height') === '330px') {			
			$('#panel2').animate({
				top: '375px',
				height: '40px'
			}, 1000);
		} else {		
			$('#panel2').animate({
				top: '70px',
				height: '330px'
			}, 1000);
		}
    });
});
</script>

<style>
div.gray {
	position:relative; 
	height:470px;
	background-color:#666;
	width:100%
}
#flip2 {
	position:relative; 
	top:400px;/* to make room for the slide up demo */
    padding: 5px 0;
	width:100%;
	height:50px;
	background-color: rgb(34,178,181);
	z-index:3
}
#flip2 #click {
	margin-left:85%;
	width:35px;
	height:40px;
	background-color:gold;
	border-radius:25px;
	border:2px solid #000;
	text-align:center;
	font-size:1.3em;
	line-height:45px;
	padding-left:5px;
	z-index:2
}
#panel2 {
	position:absolute; 
	top:375px;
	background-color:rgb(39,111,107);
    text-align: center;
    width: 20%;
	margin-left:75%;
	height: 40px;
	border: 15px solid rgb(34,178,181);
	z-index:1;
	border-radius:30px
}
</style>
<div class="gray">
<div id="flip2">
   <div id="click">&#9654;</div>
</div>
   <div id="panel2">Hello world!</div> 
</div>                     
</body>
</html>

Open in new window

0
a204801Author Commented:
hmm...the reason why this doesn't work couldn't be a few, but it seems to pin it at the bottom of the page:

http://mac-test.com/test05.html

The link redirects.
0
Tom BeckCommented:
The effect at your link works the same in Firefox, Chrome, and Safari on my system as it does in my sample.

Not understanding this statement, "seems to pin it at the bottom of the page".

I am surprised that you simply cut and pasted my sample to the page without any adjustment to the positioning or size of the elements. The code and css in the sample works for the sample. I had to artificially move the sliding div down the page in the sample so there was room above it for the slide-up effect to show. That's why I had a top:400px on the parent div. I also made a note to that affect in the css. To use it on an actual page in a different situation alongside other content, you need to adjust the values.
0
a204801Author Commented:
I added it, and have been playing with it ever since.  Im probably not saying it correctly.

I was able to move the click area into the right area, but I cannot seem to move the "panel2" along with it.  Its haning at the bottom of the screen.  I cannot seem to move it with the rest.
0
Tom BeckCommented:
<script> 
$(document).ready(function(){
    $('#click').click(function(){
		if ($('#panel2').css('height') === '330px') {			
			$('#panel2').animate({
				top: '-35px',
				height: '40px'
			}, 1000);
		} else {		
			$('#panel2').animate({
				top: '-295px',
				height: '330px'
			}, 1000);
		}
    });
});
</script>

<style>
div.gray {
	position:relative; 
	background-color:#666;
	width:100%
}
#flip2 {
	position:relative; 
	top:0px;
    padding: 5px 0;
	width:100%;
	height:50px;
	background-color: rgb(34,178,181);
	z-index:3
}
#flip2 #click {
	margin-left:85%;
	width:35px;
	height:40px;
	background-color:gold;
	border-radius:25px;
	border:2px solid #000;
	text-align:center;
	font-size:1.3em;
	line-height:45px;
	padding-left:5px;
	z-index:2
}
#panel2 {
	position:absolute; 
	top:-35px;
	background-color:rgb(39,111,107);
    text-align: center;
    width: 20%;
	margin-left:75%;
	height: 40px;
	border: 15px solid rgb(34,178,181);
	z-index:1;
	border-radius:30px
}
</style>
<div class="gray">
<div id="flip2">
   <div id="click">&#9654;</div>
</div>
   <div id="panel2">Hello world!</div> 
</div>    </div>

Open in new window

0
a204801Author Commented:
Thank you.  I feel like I should send you another 500pts some how.
0
a204801Author Commented:
I will start a new question.  I have a follow up to this.  It has to do with image changing.
0
a204801Author Commented:
0
Tom BeckCommented:
Thanks for the points.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.