how to show/hide item onclick jquery

Question

I want to show a certain div onclick of anchor, then I want to hide the div onclick of anchor again, here is my code:

jQuery('.mycart').click(function(e){

            e.preventDefault();
            var target = jQuery(".basket");

            if(target.is(':visible'))

                jQuery('.basket').css('cssText', 'display: none !important');

            else

                jQuery('.basket').css('cssText', 'display: block !important');
        });

jQuery(document).mouseup(function (e){
        var container =jQuery(".basket");

        if (!container.is(e.target) // if the target of the click isn't the container...
            && container.has(e.target).length === 0) // ... nor a descendant of the container
        {
            container.hide();
        }
    });

html:

<a class="cart mycart" href="#">My Cart</a>
<div class="basket">
<span class="callout-arrow"></span>
<div class="basketcount"><span>5</span></div>
   <button type="button" class="checkoutbtn">checkout</button>
</div>

the div is shown successfully onclick, but its not hide again. the problem is caused by the second function that is hiding the container when the user clicks outside it.

have you [checked this](http://stackoverflow.com/questions/10310717/toggle-show-hide-on-click-with-jquery) yet?? — Rohit416, Nov 03 '15 at 08:31

score 2 · Answer 1 · edited Nov 03 '15 at 08:38

2

Your code works. I have added 2 other solutions to it anyway:

jQuery('.mycart').click(function(e){

    e.preventDefault();
    $(".basket").slideToggle(800);
});

http://codepen.io/damianocel/pen/avjVGQ

I have commented out one, just try and see which one you like best.

edited Nov 03 '15 at 08:38

Eric

6,563
5
42
66

answered Nov 03 '15 at 08:34

damiano celent

721
6
12

the element display is none and important in the css, so this will no work, the css rule will override it – Mohammad Nov 03 '15 at 08:42
It should not, and if, use the fadeToggle method, this sets the display to none by default. So does the slideToggle method btw. – damiano celent Nov 03 '15 at 08:46

score 1 · Answer 2 · answered Nov 03 '15 at 08:30

1

use this code in your JQuery

$('.mycart').click(function() {
   if($('.basket').is(':visible')) {
       $('.basket').hide()
   }
  else {
       $('.basket').show()
  }
})

answered Nov 03 '15 at 08:30

Jrey

1,618
2
17
34

score 1 · Accepted Answer · answered Nov 03 '15 at 09:05

I found the solution, just by blocking the mouseup() function to hide the container if the clicked target is the anchor $('.mycart'), so the when the user clicks on this anchor, the click() function of this anchor will be applied normally and hide the container if its shown, here is the new jquery:

jQuery('.mycart').click(function(e){

        e.preventDefault();
        var target = jQuery(".basket");

        if(target.is(':visible'))
            jQuery('.basket').css('cssText', 'display: none !important');

        else
            jQuery('.basket').css('cssText', 'display: block !important');
    });

    jQuery(document).mouseup(function (e){
        var container =jQuery(".basket");

        if (!container.is(e.target) // if the target of the click isn't the container...
            && container.has(e.target).length === 0 && !jQuery('.mycart').is(e.target)) // ... nor a descendant of the container or .mycart anchor
        {
            container.hide();
        }
    });

score 0 · Answer 4 · answered Nov 03 '15 at 08:27

0

Try this...

jQuery('.mycart').click(function(e) {
    e.preventDefault();
    var target = jQuery(".basket");
    if(target.is(':visible')) {
        jQuery('.basket').css('cssText', 'display: none !important');
    } else {
        jQuery('.basket').css('cssText', 'display: block !important');
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a class="cart mycart" href="#">My Cart</a>
<div class="basket">
    <span class="callout-arrow"></span>
    <div class="basketcount"><span>5</span></div>
    <button type="button" class="checkoutbtn">checkout</button>
</div>

answered Nov 03 '15 at 08:27

Eric

6,563
5
42
66

@user2101939 , why is the additional method in the code needed? My example works in [tag:Chrome] without your change. – Eric Nov 03 '15 at 08:32
the second method needed to hide the container when the user clicks out – Mohammad Nov 03 '15 at 08:34
@user2101939 , what do you mean by "clicks out"? – Eric Nov 03 '15 at 08:36
1

I mean when the user clicks outside the container. – Mohammad Nov 03 '15 at 08:37

how to show/hide item onclick jquery

4 Answers4