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....
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....
Share Improve this question edited Jun 21, 2019 at 5:00 plugincontainer asked Jun 20, 2019 at 13:12 plugincontainerplugincontainer 6302 gold badges10 silver badges31 bronze badges 02 Answers
Reset to default 5You 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 remend defining a class for this and then adding/removing it as necessary, rather than using direct style properties.
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>