Here are my code snippets. Unfortunately, I couldn't attach them to my question so I'm leaving them here. Thank you in advance for your assistance!
JavaScript:
var coll = document.getElementsByClassName("collapsible")
for (let i=0; i<coll.length; i++) {
coll[i].addEventListener('click', function(){
this.classList.toggle("active")
var content = this.nextElementSibling
if(content.style.maxHeight){
content.style.maxHeight = null
}else{
content.style.maxHeight = content.scrollHeight + "px"
}
} )
}
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<link rel="stylesheet" href="mes.css">
<link rel="stylesheet" href="chat.css">
<script src="https://kit.fontawesome.com/48a972c999.js" crossorigin="anonymous"></script>
</head>
<body>
<!--CHAT BAR BLOCK-->
<div class="chat-bar-collapsible">
<button id="chat-button" type="button" class="collapsible">Chat With Us!
<i id="chat-icon" style="color:#fff" class="fa fa-fw fa-comments-o"></i>
</button>
</div>
<div class="content">
<div class="full-chat-block">
<!--Message Container-->
<div class="outer-container">
<div class="chat-container">
<!--Message-->
<div id="chatbox">
<h5 id="chat-timestamp"></h5>
<p id="botStarterMessage" class="botText"><span>Loading...</span></p>
</div>
<!--User Input Box-->
<div class="chat-bar-input-block">
<div id="userInput">
<input type="text" id="textInput" class="input-box" name="msg" placeholder="Tap 'enter' to send a message">
<p></p>
</div>
<div class="chat-bar-icon">
<i id="chat-icon" style="color:crimson" class="fa fa-fw fa-heart" onClick="heartButton()"></i>
<i id="chat-icon" style="color:#333" class="fa fa-fw fa-send" onClick="sendButton()"></i>
</div>
<div id="chat-bar-bottom">
<p></p>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="mes.js"></script>
</body>
</html>