Using document.querySelector('.').style. to change *two* CSS properties of a div

user_1446498 0
Viewed 7085

Trying to set up a truncated textbox that expands to fullsize with a click/tap on the textbox. My div .textbox has height:10em, overflow:hidden, and there's a "there is more..." fade-out effect over the bottom third of the textbox using .textbox:after {height: 3em; background: linear-gradient} (found here - see Fade Out Way). Found on SO a script for expanding .textbox to height:auto. 

<script>
document.querySelector('.textbox').addEventListener('click', function() {
  document.querySelector('.textbox').style.height='auto';
});
</script>

Problem is, the .textbox:after fade-out effect still covers the bottom 3em of the expanded textbox, obscuring the text. So, on click/tap, I need the script to change the padding-bottom of .textbox from 0 to 3em (as well as increase height to auto). Can the script above handle those two changes? I've searched and only find examples for changing a single property, like color or border (e.g. here) or using javascript to change multiple divs. I've tinkered, but the results are either the script doesn't work or it only effects height: auto.

Oops! Sorry, Little bug found in my setup when applying the answer. I also have a "Close" button within the textbox and if I click that, the textbox expands for a flash before closing. Tried giving the "Close" button a huge z-index, but no luck. So I need to move the queryselector from the entire textbox to the first paragraph (p class="expand") of text. So I guess I'd start with...

document.querySelector('.expand').addEventListener('click', function() {
  document.querySelector('.textbox').style.height='auto';

...but the this.style.paddingBottom='2em'; has no effect. What do I do?

Final note. Two solutions here....

css html javascript
2 Answers

You just set the other property as well. The changes don't take effect until the browser re-renders anyway (after your JavaScript event handler has returned);

document.querySelector('.textbox').addEventListener('click', function() {
  this.style.height='auto';
  this.style.paddingBottom='3em';
});

Notice that you can use this to refer to the element within the handler, no need to go find it again.

However, I would recommend defining a class for this and then adding/removing it as necessary, rather than using direct style properties.

user_1572470

Are you looking for something like this?

<script>
const textbox = document.querySelector('.textbox');
textbox.addEventListener('click', function() {
  textbox.style.height = 'auto';
  textbox.style.paddingBottom ='3em';
});
</script>
user_116762180
Related