CODEWITHSUNDEEP
javascripthtmlcss
user9099802
user9099802

Reputation: 253

Show / hide div with two buttons

I have two buttons createChatWindow and openSettings. Each button displays a div. I want the div to be hidden when clicked outside of it. My problem is that when I click elsewhere the div is closed but the other one is displayed.

Here is my html:

<div class="chat-threads" id="chat-threads">
    <button class="top-bar-btn create"
            (click)="createChatWindow()">
      <i class="fa fa-pencil-square-o"></i>
    </button>

    <button class="top-bar-btn settings"
            (click)="openSettings()">
      <i class="fa fa-cog"></i>
    </button>

    <div id="outside" (click)="hide()"></div>
</div>

And my .ts : 

hide(): void {
  document.getElementById('outside').style.display = 'none';
  document.getElementById('chat-threads').classList.toggle('display-settings');
  document.getElementById('chat-threads').classList.toggle('display-new-chat-window');
}

openSettings(): void {
  document.getElementById('outside').style.display = 'block';
  document.getElementById('chat-threads').classList.toggle('display-settings');
}

createChatWindow(): void {
  document.getElementById('outside').style.display = 'block';
  document.getElementById('chat-threads').classList.toggle('display-new-chat-window');
}

Upvotes: 0

Views: 441

Answers (1)

Michał Skrzypek
Michał Skrzypek

Reputation: 699

When you click outside, so in the hide() function, don't use toggle, use remove:

hide(): void {
  document.getElementById('outside').style.display = 'none';
  document.getElementById('chat-threads').classList.remove('display-settings');
  document.getElementById('chat-threads').classList.remove('display-new-chat-window');
}

Upvotes: 2

Related Questions