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

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div  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!

CodePudding user response：

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  id="anchor-cards-list">Lorem Ipsum</div>
</div>

CodePudding user response：

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.

CodePudding user response：

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();
 });
});

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

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>

CodePudding user response：

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>