-2

Here's an example of what i'm trying to do.

I can't use jquery, can i do this with just pure js and css?

thanks :)

itailitai
  • 1
  • 2
  • 3
    This isn't going to be easy but this may point you in the right direction: http://stackoverflow.com/a/17257848/4270597 What are your reasons for not using JQuery? – winseybash Mar 05 '15 at 13:27
  • 3
    jQuery is "just"a library (a damn good one) writen in JS and in theory you can do anything just with JS but before anything else please read it: http://stackoverflow.com/help/how-to-ask – jean Mar 05 '15 at 13:28

2 Answers2

1

You should add some code, i'll add some when you do :)

You'll want to use css animations and have the div use a default state of display:none, height: 0;

Then with JS you can add hide the class. This class will display:block, height: 50px

Jamie Hutber
  • 26,790
  • 46
  • 179
  • 291
  • I have an array with all the items from the data base, so i want to print these divs for every one. im printing them with a for loop in jsp. I edited my post the code is in there. – itailitai Mar 05 '15 at 14:16
0

It would have been better if you can provide some code. You can check below codepen code. I have implemented it on CSS hover no js is involved. Check if it helps. 

<div class="main">
  <div class="next">

  </div>
</div>

.main{
  min-height:50px;
  background-color:red;
  transition:all 0.8s ease-out;
  margin-bottom:5px;
  cursor:pointer;
}
.next{
  height:0px;
  background-color:green;
  transition:all 0.5s ease-out
}
.main:hover{
  padding-top:50px;
}
.main:hover .next{
  height:50px;

}

http://codepen.io/gauravshankar/pen/ZYjZEd

This can also be done on click if you use a checkbox or a radio button.

Gaurav
  • 59
  • 3
  • thanks, i changed your code a bit and now it's fine :), how can i make it happen only when you click the div? – itailitai Mar 05 '15 at 16:34