javascript - Click an object and show another - simple jQuery snippet -

i have simple click , show snippet needs bit of modifying. behavior striving when click on li element, hide other grey boxes other li objects. also, need hide grey boxes when click on body of document (e.g. > outside of ul container).

here sample code:

$('.openmodal').on('click', function (e) {     $('#servicelist').find('.modal.active').removeclass('active');     e.preventdefault();     $(this).find('.modal').toggleclass('active'); }); 

here fiddle.

i having bit of hassle reaching desired effect. how can achieve this?

thanks in advance!

please have @ updated fiddle:

https://jsfiddle.net/xvopdkf8/4/

you missed giving id ul element <ul id="servicelist">

modified js code follows:

$('.openmodal').on('click', function (e) {     $('#servicelist').find('.modal.active').removeclass('active');     e.preventdefault();     $(this).find('.modal').toggleclass('active'); });  $(document).on('click', function (e) {     var $target = $(e.target);     if($target.closest("#servicelist").length == 0)     {         e.preventdefault();         $('#servicelist').find('.modal.active').removeclass('active');     }     else         e.preventdefault(); });