Make a DIV reveal upwards onClick

Question

I found a topic for revealing a DIV upwards but as I am no Javascript expert, I am wondering how I can make this work onClick rather than on hover?

Just in case this helps, the link to previous topic is: How to make jQuery animate upwards

Any help is appreciated.

what is your definition of "reveal upwards"? any webpage we can have an example? — balexandre, Apr 16 '12 at 07:58

coder · Accepted Answer · 2012-04-16T08:46:09.433

2

Here is a sample demo

$("#slideToggle").click(function () {
   $('.slideTogglebox').slideToggle();
});

$("#reset").click(function(){
    location.reload();
});

HTML:

   <button id=slideToggle>slide</button>
    <br/>
    <div class="slideTogglebox">
         slideToggle()
    </div>

edited Apr 16 '12 at 08:46

answered Apr 16 '12 at 08:02

coder

13,002
31
112
214

score 0 · Answer 2 · answered Apr 16 '12 at 08:01

0

 $(document).ready(function() {
   var isClicked = false; //assuming its closed but its just logic
    $('.button').click(function() {
        if (isClicked) {
            isClicked = true;
            $(this).closest('div').animate({
            height: "150px",
        }, 400, "swing");
        }
        else
        {
            isClicked = false;
            $(this).closest('div').animate({
                height: "50px",
            }, 400, "swing");
        }
    });
 });

This is pretty bad way of doing it any way. You should consider trying to use CSS3 instead and then jsut using jQueries toggleClass

.toggleClass('animateUpwards)

Lets the browser use hardware capabilities to animate all the stuff and also its a nice one liner in JavaScript.

answered Apr 16 '12 at 08:01

Piotr Kula

9,597
8
59
85

I am not sure what you mean. Where does it exist? – Piotr Kula Apr 16 '12 at 09:19
http://api.jquery.com/toggle-event/ - toggleclass cannot animate (at least not until CSS3 as you suggest) - and I just now realise we have http://api.jquery.com/slideToggle/ – mplungjan Apr 16 '12 at 10:52
Yea.. thats why this question is slightly out of date, because jquery and jqueryUI have enough methods to animate what ever you want :) So thats why i said.. he is doing something in between, – Piotr Kula Apr 16 '12 at 11:03
Yes, but your if(isClicked) is for sure not needed :) – mplungjan Apr 16 '12 at 11:14

mplungjan · Answer 3 · 2012-04-16T10:56:29.880

Try jQuery slideUp or as posted elsewhere jQuery slideToggle - Alternatively CSS3 Example

or from the questions you posted, perhaps this is what you meant:

http://jsbin.com/ogaje

Clicking the (visible part of) the div

$(document).ready(function() {
  $('.featureBox').toggle(function() {
    $(this).animate({top: '-390px', height:'540px'},{duration:'slow', queue:'no'});
    // or $(this).slideUp()
  },
  function() {
    $(this).animate({top: '0px', height:'150px'},{duration:'slow', queue:'no'});
    // or $(this).slideDown()
  });
});

Clicking something else

$(document).ready(function() {
  $("#button").toggle(function() {
    $("#someDiv").animate({top: '-390px', height:'540px'},{duration:'slow', queue:'no'});
    // or $("#someDiv").slideUp()
  },
  function() {
    $("#someDiv").animate({top: '0px', height:'150px'},{duration:'slow', queue:'no'});
    // or $("#someDiv").slideDown()
  });
});

Make a DIV reveal upwards onClick

3 Answers3