The initial div in the code snippet below showcases the name of a university. When this name is clicked, it activates the function display_people(). This function is responsible for displaying or hiding the individuals associated with that university. The names of these individuals are within a div element with the id "college_people", which initially has its display property set to none.
Upon clicking on an individual's name, another function called display_chat_box() kicks in to show the chat-box corresponding to that particular person.
The issue arises when the person's name is hidden using the toggle() method from jQuery, causing the chat-box to disappear as well. This unintended behavior occurs due to the chat-box being reliant on the onclick event of the person's name. To address this, I would like the chat box to remain visible even if the person's name is hidden.
Is there a way to achieve this without losing the chat-box along with the disappearance of the person's name?
<div id='state_college_container' onclick='display_people()'>
<span id='state_college_span'>
University Name
</span>
</div>
<div id='college_people' style='display:none'>
<div id='college_people_container' onclick='display_chat_box()'>
<span id='college_people_span'>
Individual's Name
</span>
</div>
</div>
function display_people() {
$("#college_people").toggle();
}
function display_chat_box() {
$(".chat_box").show();
}
The chat-box content resides in a separate HTML file under the class name chat_box, functioning independently of other elements.
Below is the HTML structure for the chat box:
<div class="chat_box">
<div id="chat_box_bar">
<span id="chat_with">Your name</span>
<span id="close_chat" onclick="close_chat_box()">X</span>
</div>
<div id="previous_chat1" >
<span> Hi, how are you?</span>
</div>
<div id="textarea_container">
<textarea onkeypress="return detectEnter(event)" id="chat_content1" name="posted_content1"></textarea>
</div>
</div>