Javascript Function : Toggle visibility of div when user clicks anywhere on the page

Question

Javascript Function : Toggle visibility of div when user clicks anywhere on the page

I have implemented a feature where clicking on the 3 dots reveals a div, and clicking again hides it. However, I would like the div to hide when clicking anywhere else on the document.

Imagine two circles - clicking on one circle displays a div, while clicking on the other closes the current one and opens a related div. Yet, whenever I click elsewhere on the document, neither of the divs are closed.

$("#discussion_declined , #discussion_pending").click(function() {
  var relatedDiv = $(this).closest('.panel').find('.discussion_edit_div');
  relatedDiv.toggle("fast");
  $('.discussion_edit_div').not(relatedDiv).hide('fast');

});

.discussion_small_round_div {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  position: relative;
  background: #2d3446;
  bottom: 9px;
  left: 15px;
  float: right;
}
.discussion_small_round_div:after {
  content: '\2807';
  font-size: 1.5em;
  color: white;
  position: absolute;
  left: 9px;
  top: 1px;
}
.discussion_edit_div {
  background: #FFFFFF;
  display: none;
  position: absolute;
  right: 35px;
  border: thin #ced0d1 solid;
  z-index: 1001;
  width: 150px;
  box-shadow: 0px 3px 3px #ccc;
}
ul li {
  padding: 5px 15px;
  list-style-type: none;
  color: #838383;
}
ul li:hover {
  background: #eeeded;
  cursor: pointer;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>


<div class="panel discussion_panel_div no_background no_box_shadow" style="position: relative;">
  <div class="panel-heading no_border_radius bg-dark set_padding_0">
    <div class="discussion_small_round_div pull-right cursor_pointer" id="discussion_declined"></div>
  </div>
  <div class="discussion_edit_div">
    <ul>
      <li> <span class="glyphicon glyphicon-trash"></span>&nbsp; Replicate</li>
      <li><span class="glyphicon glyphicon-trash"></span>&nbsp; Delete</li>
      <li><span class="glyphicon  glyphicon-ban-circle"></span>&nbsp; Deactivate</li>
    </ul>
  </div>
</div>


<div class="panel discussion_panel_div no_background no_box_shadow" style="position: relative;">
  <div class="panel-heading no_border_radius bg-dark set_padding_0">
    <div class="discussion_small_round_div pull-right cursor_pointer" id="discussion_pending"></div>
  </div>
  <div class="discussion_edit_div">
    <ul>
      <li> <span class="glyphicon glyphicon-trash"></span>&nbsp; Replicate</li>
      <li><span class="glyphicon glyphicon-trash"></span>&nbsp; Delete</li>
      <li><span class="glyphicon  glyphicon-ban-circle"></span>&nbsp; Deactivate</li>
    </ul>
  </div>
</div>

javascript jquery html css

Answer 1

Answer №1

Although Praveen's solution is effective, it is possible to achieve the same outcome without modifying your HTML code.

To do this using jQuery, simply include the following:

$(window).click(function() {
//Hide any visible menus
$('.discussion_edit_div').hide('fast');
});

$("#discussion_declined , #discussion_pending").click(function(e) {
  e.stopPropagation();
  var relatedDiv = $(this).closest('.panel').find('.discussion_edit_div');
  relatedDiv.toggle("fast");
  $('.discussion_edit_div').not(relatedDiv).hide('fast');

});

With these adjustments, you'll be all set.

This method also allows for easier toggling between ul elements with just one click, unlike Praveen's approach which requires two clicks to open another ul.

See the demonstration here:https://jsfiddle.net/zfqqqr1c/1/

Answer 2

Although Praveen's solution is effective, it is possible to achieve the same outcome without modifying your HTML code.

To do this using jQuery, simply include the following:

$(window).click(function() {
//Hide any visible menus
$('.discussion_edit_div').hide('fast');
});

$("#discussion_declined , #discussion_pending").click(function(e) {
  e.stopPropagation();
  var relatedDiv = $(this).closest('.panel').find('.discussion_edit_div');
  relatedDiv.toggle("fast");
  $('.discussion_edit_div').not(relatedDiv).hide('fast');

});

With these adjustments, you'll be all set.

This method also allows for easier toggling between ul elements with just one click, unlike Praveen's approach which requires two clicks to open another ul.

See the demonstration here:https://jsfiddle.net/zfqqqr1c/1/

Answer 3

Answer №2

It's intriguing to see how Bootstrap tackles this issue. They utilize a mask that restricts clicks to either the mask itself or the menu items.

$(function () {
  $(".mask").hide();
  $("nav > ul > li > a").click(function () {
    $(this).closest("li").addClass("open");
    $(".mask").show();
    return false;
  });
  $(".mask").click(function () {
    $(this).hide();
    $(".open").removeClass("open");
  });
});

* {font-family: 'Segoe UI'; margin: 0; padding: 0; list-style: none; line-height: 1; box-sizing: border-box;}
body {background-color: #f5f5f5;}
a {text-decoration: none; color: inherit;}

.mask {position: fixed; top: 0; bottom: 0; right: 0; left: 0; z-index: 8;}

nav > ul > li {display: inline-block; position: relative; width: 30%;}
nav > ul > li a {display: block; padding: 5px; border: 1px solid #ccc;}
nav > ul ul {position: absolute; left: 0; right: 0; z-index: 9; display: none;}
nav > ul > li.open > ul {display: block;}

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<div class="mask"></div>
<nav>
  <ul>
    <li>
      <a href="">Main Item 1</a>
      <ul>
        <li><a href="">Sub Item 1</a></li>
        <li><a href="">Sub Item 2</a></li>
        <li><a href="">Sub Item 3</a></li>
        <li><a href="">Sub Item 4</a></li>
        <li><a href="">Sub Item 5</a></li>
      </ul>
    </li>
    <li>
      <a href="">Main Item 2</a>
      <ul>
        <li><a href="">Sub Item 1</a></li>
        <li><a href="">Sub Item 2</a></li>
        <li><a href="">Sub Item 3</a></li>
        <li><a href="">Sub Item 4</a></li>
        <li><a href="">Sub Item 5</a></li>
      </ul>
    </li>
    <li>
      <a href="">Main Item 3</a>
      <ul>
        <li><a href="">Sub Item 1</a></li>
        <li><a href="">Sub Item 2</a></li>
        <li><a href="">Sub Item 3</a></li>
        <li><a href="">Sub Item 4</a></li>
        <li><a href="">Sub Item 5</a></li>
      </ul>
    </li>
  </ul>
</nav>

Answer 4

It's intriguing to see how Bootstrap tackles this issue. They utilize a mask that restricts clicks to either the mask itself or the menu items.

$(function () {
  $(".mask").hide();
  $("nav > ul > li > a").click(function () {
    $(this).closest("li").addClass("open");
    $(".mask").show();
    return false;
  });
  $(".mask").click(function () {
    $(this).hide();
    $(".open").removeClass("open");
  });
});

* {font-family: 'Segoe UI'; margin: 0; padding: 0; list-style: none; line-height: 1; box-sizing: border-box;}
body {background-color: #f5f5f5;}
a {text-decoration: none; color: inherit;}

.mask {position: fixed; top: 0; bottom: 0; right: 0; left: 0; z-index: 8;}

nav > ul > li {display: inline-block; position: relative; width: 30%;}
nav > ul > li a {display: block; padding: 5px; border: 1px solid #ccc;}
nav > ul ul {position: absolute; left: 0; right: 0; z-index: 9; display: none;}
nav > ul > li.open > ul {display: block;}

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<div class="mask"></div>
<nav>
  <ul>
    <li>
      <a href="">Main Item 1</a>
      <ul>
        <li><a href="">Sub Item 1</a></li>
        <li><a href="">Sub Item 2</a></li>
        <li><a href="">Sub Item 3</a></li>
        <li><a href="">Sub Item 4</a></li>
        <li><a href="">Sub Item 5</a></li>
      </ul>
    </li>
    <li>
      <a href="">Main Item 2</a>
      <ul>
        <li><a href="">Sub Item 1</a></li>
        <li><a href="">Sub Item 2</a></li>
        <li><a href="">Sub Item 3</a></li>
        <li><a href="">Sub Item 4</a></li>
        <li><a href="">Sub Item 5</a></li>
      </ul>
    </li>
    <li>
      <a href="">Main Item 3</a>
      <ul>
        <li><a href="">Sub Item 1</a></li>
        <li><a href="">Sub Item 2</a></li>
        <li><a href="">Sub Item 3</a></li>
        <li><a href="">Sub Item 4</a></li>
        <li><a href="">Sub Item 5</a></li>
      </ul>
    </li>
  </ul>
</nav>

Javascript Function : Toggle visibility of div when user clicks anywhere on the page

Answer №1

Answer №2

Similar questions

Guide on utilizing Subscribe Observable for performing lookup in Angular

When there is an absence of data, the jQuery datatable mysteriously van

Combining shared table rows with embedded ruby code in Javascript - is it possible?

Flexslider for Lazy Loading Images

POST request body is not defined

What is the best way to transfer a JavaScript variable value from an HTML page to a Model variable within the controller?

Is there a way to remove the "next" button from the last page in a table?

Sort by the date using a specific data attribute

When working with data in Angular, make sure to use any[] instead of any in app.component.html and app.component.ts to avoid causing overload errors

When placed within a setInterval loop, the event.clientY variable becomes inaccessible

Identifying audio elements with Modernizr technology

What is the best way to use JavaScript to show a text value alongside radio buttons?

What is the best way to extract value from a specific link using JavaScript?

Encountering Issue with Node.JS and Socket.IO Example: Debugging Error on MAC OSX Localhost. Static Content File '/socket.io.js' is not loading properly

Exploring the process of adding tooltips to column headers in ngx-datatable

Remove all child subcategories within the selected (sub)category from a cascading dependent dropdown menu selection

Please rewrite the following sentence: "I am going to the store to buy some groceries."

JavaScript does not show an error message if a function is called but has not been defined

AngularJS enables seamless two-way data binding with DropDownList in the Model-View-Controller (M

Unable to generate a navigation panel using HTML/CSS and jQuery