How to show hidden div onclick of button and hide when not in focus using JS

Question

I'm trying to create add a way to show a div onclick of a button and hide it when not in focus / when user clicks outside the div.

I've already managed to add a button that can show a hidden div, but I can't figure out how to make it hidden again when focus is lost.

I've read this: Hide a DIV when it loses focus/blur

...and other articles, but I couldn't follow them to make it work..

Please see my code so far:

function openCardsList() {
  let window = document.getElementById("anchor-cards-list");
  window.style.display = "block";
}
$(document).not("#anchor-cards-list").click(function() {
  $('#anchor-cards-list').hide();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="collapse" id="anchor-cards-list">Lorem Ipsum</div>

<button id="anchor-open-cards-list-btn" onclick="openCardsList();">Collapse Maincard</button>

Any help would be appreciated. Thank you in advance!

I'm not sure about that error message, but it's working for me if I click the button, it shows the hidden div? — ixcode, Apr 15 '22 at 17:41
@ruleboy21 it shows error because author's snippet including jQuery. — NNL993, Apr 15 '22 at 19:54

score 3 · Accepted Answer · answered Apr 15 '22 at 17:57

3

you can use this code :

function openCardsList() {
    let window = document.getElementById("anchor-cards-list");
    window.style.display = "block";
  }
  function hideDiv(){
    let window = document.getElementById("anchor-cards-list");
    window.style.display = "none";
  }

and add onclick event to parent div

div onclick="hideDiv()" style="height: 100vh;">
  <div class="collapse" id="anchor-cards-list">Lorem Ipsum</div>
</div>

answered Apr 15 '22 at 17:57

farshid shadman

61
1

This is a good solution.. only problem I see is it closes the `div` even when clicking inside of it.. – ixcode Apr 15 '22 at 18:20

score 2 · Answer 2 · answered Apr 15 '22 at 17:56

I'd personally simplify things to separate concerns. Add an event listener to the button (click) to show your div, and an event listener (blur) on the div to hide it again.

document.getElementById('anchor-open-cards-list-btn').addEventListener('click', showDiv);
document.getElementById('anchor-cards-list').addEventListener('blur', hideDiv);

Then showDiv and hideDiv just handle the element visibility.

nalendro16 · Answer 3 · 2022-04-15T19:57:36.560

2

i prefer to make let window outside the function so you can use it anytime needed. and also if you only make this for handle show/hide div while onclick and onblur you dont need jquery. the default javascript can deliver those event action.

script.js

let card = document.getElementById('anchor-cards-list')

function openCard() {
  card.style.display = 'block'
}

function blurCard() { 
 card.style.display = 'none'
}

index.html

<div id="anchor-cards-list">Hello Text</div>
<button onclick="openCard()" onblur="blurCard()">Clik me</button>

edited Apr 15 '22 at 19:57

answered Apr 15 '22 at 18:06

nalendro16

71
4

It would be a good practice to try to avoid using 'window' as a variable name , since window is already defined by default in the global scope – Vibhu Apr 15 '22 at 19:46
@Vibhu thanks for the correction, on my chrome it give a warning on console but since it work i ignored it – nalendro16 Apr 15 '22 at 19:58

Siraj Ali · Answer 4 · 2022-04-15T18:47:59.080

2

Use jquery simple way

use toggle() instead of show/hide, because it is more clear and simple.

$(document).ready(function(){
  $("#anchor-open-cards-list-btn").click(function(){
   $("#anchor-cards-list").toggle();
 });
});

OR

function openCardsList() {
  $("#anchor-cards-list").toggle();
}

OR

For onblue you can also use this code

function openCardsList() {
 $("#anchor-cards-list").css('display','block');
}
function hideD(){
 $("#anchor-cards-list").css('display','none');
}

add onclick event in parent div

div onclick="hideD()">
 <div id="anchor-cards-list">text</div>
</div>

edited Apr 15 '22 at 18:47

answered Apr 15 '22 at 18:13

Siraj Ali

526
6
13

Thank you for your response.. however is this only to show/hide a div but not hide onblur? – ixcode Apr 15 '22 at 18:25
for onblur the third one steps, The first and second options are for show/hide div on single button – Siraj Ali Apr 15 '22 at 18:53

score -1 · Answer 5 · answered Mar 10 '23 at 18:56

const phoneCross=document.getElementById('phone-cross').addEventListener('click',function(){

            console.log('clicked phone cross button');
            // cross button display none successful way
            document.getElementById('main-phone-div').style.display='none';

How to show hidden div onclick of button and hide when not in focus using JS

5 Answers5