In my webpage, I have div elements with multiple classes for easy manipulation in jQuery based on their nature.
When I try to expand and collapse the div on a button click event, everything works fine except for the transition effect which is not working as expected.
To see an example of this issue, you can check out the Fiddle I created by clicking here.
I've seen examples of using transition, but I'm wondering if the transition should always be applied to top-level identifiers like div or element-id.
This is how my CSS looks like (also available in the fiddle):
.display{
background-color: #a17917;
} /* DIV */
.mytable td div.data-div{
min-height:120px;
max-height:140px;
min-width:120px;
max-width:140px;
border: 1px solid black;
overflow:hidden;
position: relative;
transition: height 3s, width 3s;
}
.mytable td div.collapse{
min-height:120px;
max-height:140px;
min-width:120px;
max-width:140px;
}
.mytable td div.expand{
min-height:300px;
max-height:300px;
min-width:300px;
max-width:300px;
}
On button click, I simply add the expand class to the div and remove the collapse class (after checking if the div is already expanded or not).