Change the content of a style class

Question

I use css to have animation (using transition) in a div. The content of the div is dynamical (can be 1 line or multiple lines).

I have 2 classes I switch to get the animation effect:

.class1{
    max-height: 200px;
}
.class2{
    max-height: 0;
}

My problem occurs when the I have only 1 line in the div, so there's "delay" until the 1 line disappears (because the height changes from 200px to 0 while the actual size is only 30px).

I tried to use element.style.maxHeight = elem.offsetHeight + "px" to set the max-height size but it didn't work so I want to change max-height in the class (class1 or class2) to fit the actual size.

How can I change the content of a class (I don't want to have: "style = max-height: 100px" in my div)?

why not create another class with that `max-height` and apply that class instead? (like: `.class3 {max-height: 100px;}`), this is not editing a class, it is applying it. — jackJoe, Jan 11 '16 at 10:19
You just might want to try to do [this](http://stackoverflow.com/a/8331169/3880255). — Clemens Himmer, Jan 11 '16 at 10:38
Use jQuery to either remove class or change style using `.css` method ,, there are various solutions to your problem — Amar Singh, Jan 11 '16 at 11:10
@jackJoe the text can be in multiple lines so I'll need multiple classes, each one for different number of lines... not good idea... — Dror, Jan 11 '16 at 12:14
@Tarekis I saw that thread and it has the same problem: when I delete some of the
Is [this](https://jsfiddle.net/Tarekis/khhvu2qc/) what you need? It's just some basic thing with only the element itself being clickable, but if it is i'll write an answer. — Clemens Himmer, Jan 11 '16 at 12:57
@Tarekis no, it's not what I meant... How can I change dynamically to have: .class1{max-height: 100px} — Dror, Jan 11 '16 at 13:52
Guess you need [this](http://stackoverflow.com/a/2076345/3880255) then? — Clemens Himmer, Jan 11 '16 at 13:57

Francesco · Answer 1 · 2016-01-11T14:23:11.647

0

You could use the transition in combination with the transform. Not only because solve your problem, but also because has better performance then change the height. Doesn't make sense changing the height and using CSS, in terms of performance you can use JS, it is the same.

I did an example for you on jsfiddle because on here seems to do not work.

jQuery(document).ready(function() {
  jQuery('.click-me').on('click', function() {
    var $this = jQuery(this);
    if ($this.hasClass('show')) {
      jQuery(this).removeClass('show').addClass('hide');
    }
  });
});

.hide {
  transform: translateY(-100%);
  z-index: -1;
}
.show {
  transform: translateX(0);
  z-index: 0;
}
.animate {
  transition: transform 1s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="parent">
  <div class="click-me animate show">
    <div>one line</div>
  </div>
</div>

edited Jan 11 '16 at 14:23

answered Jan 11 '16 at 10:48

Francesco

1,383
7
16

I still have a problem: when I move the text up, I can still see it. How can I hide the text (doesn't matter how's the html look, the text shown (I need to hide it). – Dror Jan 11 '16 at 13:36
my error. If the works, you could accept my answer as correct – Francesco Jan 11 '16 at 14:23
It has problems with visibility which I'm trying to solve. I hope it'll work as I thought and hoped. – Dror Jan 12 '16 at 07:49
which browser and which cellphone do you have? – Francesco Jan 12 '16 at 15:46
It's not browser, it's the HtmlBox object I'm using. My problem is only on Samsung S3 (and maybe on other old devices, I didn't check it)... – Dror Jan 13 '16 at 11:19

Change the content of a style class

1 Answers1