on Click body close sidebar menu

Question

I created a sidebar toggle menu when i open and close its works proper but the problem is i want to close toggle side bar on body overlay click.

Any help would be greatly appreciated.

The code is below:

 $(document).ready(function () { $(function () { $('.panel-arrow').click(function () { if ($(this).hasClass('show')) { $(".body-overlay").fadeIn(500); $(".panel-arrow, .side-menu-panel").animate({ left: "+=300" }, 700, function () { // Animation complete. }); $(this).html('<img src="http://t0.gstatic.com/images?q=tbn:ANd9GcQI_GgiTYKrjmlf1Hg4UknzhYRTq-Qq_XsBuPrw98n0drNA5ZSj"/>').removeClass('show').addClass('hide'); } else { $(".body-overlay").fadeOut(400); $(".panel-arrow, .side-menu-panel").animate({ left: "-=300" }, 700, function () { // Animation complete. }); $(this).html('<img src="http://icons.iconarchive.com/icons/custom-icon-design/pretty-office-5/256/navigate-right-icon.png"/>').removeClass('hide').addClass('show'); } }); }); }); 

 *{margin:0px; padding:0px;} ul{margin:0px, padding:0px;} .panel-arrow img { width:35px; height:auto;} /* -- Side Master Menu -- */ .side-menu-panel { width:300px; float:left; height:100%; background:#373737; position:fixed; left:-300px; top:10px; z-index:10000;} .body-overlay { display:none; background:rgba(0,0,0,0.5); opacity 0.5; filter: alpha(opacity = 50); /* IE7 & 8 */ position:fixed; right: 0; top: 0; width:100%; height:100%; z-index:9999;} .panel-arrow { float:left; background:#191919; font:bold 14px Arial, Helvetica, sans-serif; color:#000 !important; text-decoration:none; text-align:center; height:35px; line-height:35px; position:fixed; left:0; top:10px;} .master-side-nav { background-color:#191919; height:100%; position:relative; width:100%; font-family:Arial;} .master-side-nav .title { background-color:#ff9205; color:#fff; font-family:arial; font-size:15px; width:100%; float:left; font-weight:bold; padding:7px; text-align:left; text-transform:uppercase;} .master-side-nav ul, .master-side-nav ul li { float:left; width:100%; margin:0px;} .master-side-nav ul li { list-style:none; border-bottom:1px solid #0c0c0c;} .master-side-nav ul li:last-child { border-bottom:0;} .master-side-nav ul li a { background-color:#191919; color:#d2dbda !important; display:block; font-family:arial; font-size:13px; font-weight:100; padding:3%; text-align:left; width:94%;} .master-side-nav ul li a:hover, .master-side-nav ul li a:focus, .master-side-nav ul li a:active { background-color:#0d0d0d; text-decoration:none;} /* -- Side Master Menu -- */ 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="side-menu-panel"> <div class="master-side-nav"> <div class="title">Menu</div> <ul> <li><a href="supplierProductShowcase.aspx?suppid=<%=suppid %>" onclick="supplierProductShowcase.aspx?suppid=<%=suppid %>">Add/Edit showcase</a></li> <li><a href="SupplierProductDetailsDesign.aspx?suppid=<%=suppid %>" onclick="SupplierProductDetailsDesign.aspx?suppid=<%=suppid %>">Add/Edit product details</a></li> <li><a href="product-master.aspx?suppid=<%=suppid %>" onclick="product-master.aspx?suppid=<%=suppid %>">Add products</a></li> <li><a href="AddSupplierProduct.aspx?suppid=<%=suppid %>" onclick="AddSupplierProduct.aspx?suppid=<%=suppid %>">Add products to showcase</a></li> <li><a href="supplier-showroom.aspx?suppid=<%=suppid %>" onclick="supplier-showroom.aspx?suppid=<%=suppid %>">My Showcase</a></li> <li><a href="SupplierInventory.aspx?suppid=<%=suppid %>" onclick="SupplierInventory.aspx?suppid=<%=suppid %>">Inventory Details </a></li> <li><a href="supplier-order.aspx?suppid=<%=suppid %>" onclick="supplier-order.aspx?suppid=<%=suppid %>">Order (<%=order_count %>) </a></li> <li><a href="sales-history.aspx?suppid=<%=suppid %>" onclick="sales-history.aspx?suppid=<%=suppid %>">Sales History</a></li> <li><a href="supplier-county-master.aspx?suppid=<%=suppid %>" onclick="supplier-county-master.aspx?suppid=<%=suppid %>">Masters</a></li> <li><a href="#">Reports</a></li> <li><a href="supplier-dashboard.aspx?suppid=<%=suppid %>" onclick="supplier-dashboard.aspx?suppid=<%=suppid %>">Dashboard</a></li> </ul> </div> <a href="javascript:void(0);" class="panel-arrow show" style="display:block;"><img src="http://icons.iconarchive.com/icons/custom-icon-design/pretty-office-5/256/navigate-right-icon.png"/></a> </div> <div class="body-overlay"></div> 

Answer 1

May you need this.Checkout my updated fiddle

Working Fiddle Here

Just write the click function on body-overlay

   $('.body-overlay').click(function(){  
    $('.panel-arrow').trigger('click');
});