I'm currently facing a challenge with styling a text field to expand when focused, and adding an "Add" button below it. The issue is that the elements are on different levels in the code structure, making it difficult to show or hide the button when focusing on the text area. Here's a snippet of the current setup:
<form class='container'>
<div class='form-item'>
<div class='input-container>
<textarea id='addComment'></textarea>
</div>
</div>
<span class='button-wrapper'>
<button id='addCommentBtn'></button>
</span>
</form>
Here is the CSS/SCSS I've been using:
#addCommentBtn {
display: none;
}
#addComment {
transition: all 0.5s ease;
margin: 0.5em;
width: 95%;
}
#addComment:focus {
height: 10em;
margin-bottom: 2em;
}
#addComment:focus + #addCommentBtn {
display: block;
}
While the textarea expansion on focus is working correctly, toggling the button from display:none to display:block isn't functioning as expected. I have tried various solutions like adjusting visibility property but haven't had success.
If necessary, I might need to make changes to the Vue components, although this would require approval and could impact other parts of the project due to component reuse.
In addition, I am avoiding the use of JQuery for this task as well.