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

admin管理员组

文章数量:1352005

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=".3.1/jquery.min.js"></script>
<link href="/[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>

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./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr/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!

• javascript
• html
• jquery

Share Improve this question Follow edited Apr 15, 2022 at 17:53 user12031119 1,22866 silver badges1515 bronze badges asked Apr 15, 2022 at 17:33 ixcodeixcode 65311 gold badge1111 silver badges2424 bronze badges 4

• Your snippet is not working. – ruleboy21 Commented Apr 15, 2022 at 17:37
• 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 Commented Apr 15, 2022 at 17:41
• you should try blur function event for out of focus – jsduniya Commented Apr 15, 2022 at 17:57
• @ruleboy21 it shows error because author's snippet including jQuery. – NNL993 Commented Apr 15, 2022 at 19:54

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 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>

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.

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>

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>

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

本文标签： javascriptHow to show hidden div onclick of button and hide when not in focus using JSStack Overflow