CODEWITHSUNDEEP
javascripthtmljquery
ixcode
ixcode

Reputation: 653

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

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

Upvotes: 1

Views: 7879

Answers (5)

nahidhashik
nahidhashik

Reputation: 21

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';

Upvotes: -1

nalendro16
nalendro16

Reputation: 71

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>

Upvotes: 2

Siraj Ali
Siraj Ali

Reputation: 604

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>

Upvotes: 2

farshid shadman
farshid shadman

Reputation: 61

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>

Upvotes: 3

Gary Thompson
Gary Thompson

Reputation: 171

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.

Upvotes: 2

Related Questions