Using .toggle() to show and hide a div on click not working

544
May 10, 2017, at 12:32 PM

I am trying to write a jQuery function to hide/show a div on a click.

I have an <a> tag with the class my-button. A div with the class my-div is initially hidden with display: none when the page loads. When a user click on my-button and my-div is hidden, I want to show my-div. When my-div is visible, I want to be able to hide it when a user click anywhere on the page other than on my-div. This also includes a click on my-button.

<a class="my-button">Click me!</a>
<div class="my-div">Show Me or Hide Me!</div>

I tried to use the .toggle() function without any success; my-div won't show after a click on my-button. If I replace .toggle() by .show(), my-div will show and hide if I click anywhere on the page but not if I click again on my-button.

$(document).mouseup(function(e) {
        var $container = $(".my-div");
        $(".my-button").click(function(){
            $container.toggle();
        });
        if (!$container.is(e.target) && $container.has(e.target).length === 0) {
            $container.hide();
        } 
});

What would be the best way to achieve what I want.

Answer 1

Is this what you're looking for?

$(document).mouseup(function(e) { 
  var $container = $(".my-div"); 
  if (!$container.is(e.target) && !$(".my-button").is(e.target) && $container.has(e.target).length === 0) { 
    $container.hide(); 
  } 
}); 
 
$(".my-button").click(function() { 
  $(".my-div").toggle(); 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<button class="my-button">Click me!</button> 
<div class="my-div">Show Me or Hide Me!</div>

Answer 2

You must properly attached the event to the button and use toggle() to hide or show the div

$(document).ready(function(e) { 
    $(".my-button").click(function(e){ 
      $(".my-div").toggle(); 
    }); 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<a class="my-button">Click me!</a> 
<div class="my-div">Show Me or Hide Me!</div>

Answer 3

First I would try show/hiding just on the button click Give this a try. First of all give your button an id="show_hide" and your div an id="my_div"

    $('#show_hide').click(function (e) {
        var x = document.getElementById('my_div');
        if (x.style.display === 'none') {
            x.style.display = 'block';
        } else {
            x.style.display = 'none';
        }
    });

You can change the ID's to whatever you want, but I suggest this in case you want to give other elements the same class but without this functionality

Alternatively you could add this to make it disappear when clicking anywhere else other than the button you should be able to use the following function

$(document).ready(function(){ 
  $(document).mousedown(function(e){ 
    var x = document.getElementById('my_div');
    if( e.button == 1 ) { 
        var isHovered = $('#my_div').is(":hover");
        if (!isHovered) {
            x.style.display = 'none';
        }
    } 
  }); 
});
Rent Charter Buses Company
READ ALSO
Transfer to another page in AJAX call

Transfer to another page in AJAX call

Hi there is it possible to redirect to another page using ajax? I have this piece of code that I have been working on to try this

268
How can I manipulate the `get_price_html()` function?

How can I manipulate the `get_price_html()` function?

I am working on a WordPress website, with WooCommerce functionality

382
Slide Content Smootly [on hold]

Slide Content Smootly [on hold]

I've been fascinate with Jigsaw when I been got with it's pageNow, I wanna create a sliding content that smoothly appear when I click on a certain link but I don't know how to do it using CSS and HTML

258
jQuery AJAX xml

jQuery AJAX xml

I have the code below to fetch iTunes charts directly from the RSS and display itHowever, I only want to display the informations on the rss entry for one specific id

462