We Keep Coding

How can I achieve the same without having the onclick = "showHide (this) in the html, but in jquery?

I want to put this function that is in the html:
onclick="showHide(this)"
but by jquery
https://codepen.io/ygovi/pen/jOWgMGq
HTML:
<div id="div" class="options" onclick="showHide(this)">This is the button.</div>
<div id="divcontent" class="showHide">This is a div to hide and show.</div>
<div id="div2" class="options" onclick="showHide(this)">This is the button.</div>
<div id="divcontent2" class="showHide">This is a div to hide and show.</div>
<div id="div3" class="options" onclick="showHide(this)">This is the button.</div>
<div id="divcontent3" class="showHide">This is a div to hide and show.</div>
JQUERY JQ:
$('.showHide').hide();
function showHide(btnxxx) {
$(btnxxx).next(".showHide").toggle().siblings(".showHide").hide();
}
:( please help
you must retain the behavior:
-When I click on the first div with the options class, the corresponding .showHide div is displayed and any other div .showHide that has been opened before is hidden
-And when I click the div of the options class again, the corresponding .showHide div is hidden
https://codepen.io/ygovi/pen/jOWgMGq

Jquery approach :
$('.options').click(function(){ $(this).next(".showHide").toggle(); });
and by removing .siblings(".showHide").hide() other showhide class will be as it is...
$('.showHide').toggle();
$('.options').click(function(){
$(this).next(".showHide").toggle();
});
/*function showHide(btnxxx) {
$(btnxxx).next(".showHide").toggle();
}*/
<script src="https://code.jquery.com/jquery-3.5.1.js
"></script>
<div id="div" class="options" >This is the button.</div>
<div id="divcontent" class="showHide">This is a div to hide and show.</div>
<div id="div2" class="options" >This is the button.</div>
<div id="divcontent2" class="showHide">This is a div to hide and show.</div>
<div id="div3" class="options" >This is the button.</div>
<div id="divcontent3" class="showHide">This is a div to hide and show.</div>

The problem you mentioned here is due to siblings() function. Siblings are supposed to be nested in same wrapper.
$('.mi_cuenta_opciones--detalles').hide();
$('.mi_cuenta_opciones--iconos').click(function() {
$(this).next(".mi_cuenta_opciones--detalles").toggle().closest('tr').siblings('tr').find('.mi_cuenta_opciones--detalles').hide();
});
table {
border: 1px solid #000;
}
.mi_cuenta_opciones {
position: relative;
}
.mi_cuenta_opciones--iconos {
padding-left: 20px;
color: #000;
}
.mi_cuenta_opciones--detalles {
width: 144px;
height: auto;
border: 0.5px solid #ccc;
background-color: #fff;
/* position: absolute; */
position: absolute;
top: 22px;
left: 60px;
z-index: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>Pedido1</td>
<td>
<div class="mi_cuenta_opciones">
<div class="mi_cuenta_opciones--iconos"> Opciones </div>
<div class="mi_cuenta_opciones--detalles">
<div class="mi_cuenta_opciones--ver">
Ver
</div>
<div class="mi_cuenta_opciones--informar">
<a class="informar_pago" href="/b2b_order/orders/inform_payment/1755021" alt="Informar Pago del pedido">Informar Pago</a>
</div>
<div class="mi_cuenta_opciones--cancelar">
<a class="cancelar_pedido" href="/b2b_order/orders/cancel/1755021" alt="Cancelar Pedido">Cancelar</a>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>Pedido2</td>
<td>
<div class="mi_cuenta_opciones">
<div class="mi_cuenta_opciones--iconos"> Opciones </div>
<div class="mi_cuenta_opciones--detalles">
<div class="mi_cuenta_opciones--ver">
Ver
</div>
<div class="mi_cuenta_opciones--informar">
<a class="informar_pago" href="/b2b_order/orders/inform_payment/1755021" alt="Informar Pago del pedido">Informar Pago</a>
</div>
<div class="mi_cuenta_opciones--cancelar">
<a class="cancelar_pedido" href="/b2b_order/orders/cancel/1755021" alt="Cancelar Pedido">Cancelar</a>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>Pedido3</td>
<td>
<div class="mi_cuenta_opciones">
<div class="mi_cuenta_opciones--iconos"> Opciones </div>
<div class="mi_cuenta_opciones--detalles">
<div class="mi_cuenta_opciones--ver">
Ver
</div>
<div class="mi_cuenta_opciones--informar">
<a class="informar_pago" href="/b2b_order/orders/inform_payment/1755021" alt="Informar Pago del pedido">Informar Pago</a>
</div>
<div class="mi_cuenta_opciones--cancelar">
<a class="cancelar_pedido" href="/b2b_order/orders/cancel/1755021" alt="Cancelar Pedido">Cancelar</a>
</div>
</div>
</div>
</td>
</tr>
</table>
$('.showHide').hide();
$('.options').click(function() {
$(this).next('.showHide').toggle().siblings('.showHide').hide();
});
<div id="div" class="options">This is the button.</div>
<div id="divcontent" class="showHide">This is a div to hide and show.</div>
<div id="div2" class="options">This is the button.</div>
<div id="divcontent2" class="showHide">This is a div to hide and show.</div>
<div id="div3" class="options">This is the button.</div>
<div id="divcontent3" class="showHide">This is a div to hide and show.</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Use < and > instead of < and > in html

I am passing HTML content (with base64 image) into a web service. Our web service format won't allow '<' and '>', so I am using < and >. But I am not able to retrieve content. The HTML editor itself is not giving output.
How can I do this? Below is my sample code.
<html><body><p><img src="data:image/png;base64,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" /><br /><br />---------- Reply message ----------<br />From: a.b#gmail.com<br />Date: 02/01/2018 05:42:34 PM<br />Subject: Re: Started-df<br />To: d.e#gmail.com<br />------------------------------<br /><br /><br /></p>
<div dir="ltr">&nbsp;</div>
<div class="gmail_extra"><br clear="all" />
<div>
<div class="gmail_signature" data-smartmail="gmail_signature">
<div dir="ltr">
<div>
<div dir="ltr">
<div>
<div dir="ltr">
<div>
<div dir="ltr">
<div>
<div dir="ltr">
<div dir="ltr">
<div dir="ltr">
<div dir="ltr">
<div dir="ltr">
<div dir="ltr">
<div dir="ltr">
<div dir="ltr"><span style="color: #999999;">&nbsp;</span></div>
<div dir="ltr"><span style="color: #999999; font-family: 'arial black', sans-serif;"><strong><em>Regards,</em></strong></span>
<div><span style="color: #999999; font-family: 'arial black', sans-serif;"><span style="background-color: #ffffff;">a</span></span></div>
<div><span style="color: #999999; font-family: 'arial black',sans-serif; font-size: 12.8px;">Mobile: +913344556677</span></div>
<div><span style="color: #999999; font-family: 'arial black', sans-serif;"><span style="background-color: #ffffff;">&nbsp;</span></span></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<br />
<div class="gmail_quote">On Tue, Jan 2, 2018 at 4:26 PM, <a href="mailto:d.e#gmail.com">d.e#gmail.com</a> <span dir="ltr">&lt;<a href="mailto:d.e#gmail.com" target="_blank" rel="noopener">d.e#gmail.com</a>&gt;</span> wrote:<br />
<blockquote class="gmail_quote" style="margin: 0 0 0 .8ex; border-left: 1px #ccc solid; padding-left: 1ex;">
<p><img /><br /><br />---------- Reply message ----------<br />From: <a href="mailto:d.e#gmail.com" target="_blank" rel="noopener">d.e#gmail.com</a><br />Date: 02/01/2018 03:42:06 PM<br />Subject: Ticket Started-dfd<br />To: <a href="mailto:a.b#gmail.com.com" target="_blank" rel="noopener">a.b#gmail.com.com</a><br />Cc: <a href="mailto:k.s#gmail.com" target="_blank" rel="noopener">k.s#gmail.com</a>;<a href="mailto:t.m#gmail.com" target="_blank" rel="noopener">t<wbr />a#gmail.com</a>;<a href="mailto:d.e#gmail.com" target="_blank" rel="noopener">dmeeu.<wbr />entity#gmail.com</a>;<br />------------------------------<br /><br /><br /></p>
<p>dfgd</p>
<p><br /><br /></p>
</blockquote>
</div>
</div></body></html>

Navbar collapse is not working in Bootstrap 3.2

On phone view The Navbar works just File in Bootply but it is not expanding in my site.
Here is the full page Code-
<html lang="en"><head>
<title>Your store</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="generator" content="nopCommerce">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link href="/themes/ProcoDefault/Content/jquery.datetimepicker.css" rel="stylesheet" type="text/css">
<link href="/themes/ProcoDefault/Content/bootstrap-3.2.0/CSS/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="/Content/jquery-ui-themes/smoothness/jquery-ui-1.10.3.custom.min.css" rel="stylesheet" type="text/css">
<script id="facebook-jssdk" src="//connect.facebook.net/en_US/all.js#xfbml=1"></script><script src="/Scripts/jquery-1.10.2.min.js"></script>
<script src="/Scripts/jquery.validate.min.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="/Scripts/jquery-ui-1.10.3.custom.min.js"></script>
<script src="/Scripts/jquery-migrate-1.2.1.min.js"></script>
<script src="/Scripts/public.common.js"></script>
<script src="/Scripts/public.ajaxcart.js"></script>
<script src="/Scripts/jquery.datetimepicker.js"></script>
<link rel="shortcut icon" href="http://localhost:38451/favicon.ico">
<!--Powered by nopCommerce - http://www.nopCommerce.com-->
<!--Copyright (c) 2008-2013-->
<style type="text/css">.fb_hidden{position:absolute;top:-10000px;z-index:10001}.fb_invisible{display:none}.fb_reset{background:none;border:0;border-spacing:0;color:#000;cursor:auto;direction:ltr;font-family:"lucida grande", tahoma, verdana, arial, sans-serif;font-size:11px;font-style:normal;font-variant:normal;font-weight:normal;letter-spacing:normal;line-height:1;margin:0;overflow:visible;padding:0;text-align:left;text-decoration:none;text-indent:0;text-shadow:none;text-transform:none;visibility:visible;white-space:normal;word-spacing:normal}.fb_reset>div{overflow:hidden}.fb_link img{border:none}
.fb_dialog{background:rgba(82, 82, 82, .7);position:absolute;top:-10000px;z-index:10001}.fb_reset .fb_dialog_legacy{overflow:visible}.fb_dialog_advanced{padding:10px;-moz-border-radius:8px;-webkit-border-radius:8px;border-radius:8px}.fb_dialog_content{background:#fff;color:#333}.fb_dialog_close_icon{background:url(http://static.ak.fbcdn.net/rsrc.php/v2/yq/r/IE9JII6Z1Ys.png) no-repeat scroll 0 0 transparent;_background-image:url(http://static.ak.fbcdn.net/rsrc.php/v2/yL/r/s816eWC-2sl.gif);cursor:pointer;display:block;height:15px;position:absolute;right:18px;top:17px;width:15px}.fb_dialog_mobile .fb_dialog_close_icon{top:5px;left:5px;right:auto}.fb_dialog_padding{background-color:transparent;position:absolute;width:1px;z-index:-1}.fb_dialog_close_icon:hover{background:url(http://static.ak.fbcdn.net/rsrc.php/v2/yq/r/IE9JII6Z1Ys.png) no-repeat scroll 0 -15px transparent;_background-image:url(http://static.ak.fbcdn.net/rsrc.php/v2/yL/r/s816eWC-2sl.gif)}.fb_dialog_close_icon:active{background:url(http://static.ak.fbcdn.net/rsrc.php/v2/yq/r/IE9JII6Z1Ys.png) no-repeat scroll 0 -30px transparent;_background-image:url(http://static.ak.fbcdn.net/rsrc.php/v2/yL/r/s816eWC-2sl.gif)}.fb_dialog_loader{background-color:#f2f2f2;border:1px solid #606060;font-size:24px;padding:20px}.fb_dialog_top_left,.fb_dialog_top_right,.fb_dialog_bottom_left,.fb_dialog_bottom_right{height:10px;width:10px;overflow:hidden;position:absolute}.fb_dialog_top_left{background:url(http://static.ak.fbcdn.net/rsrc.php/v2/ye/r/8YeTNIlTZjm.png) no-repeat 0 0;left:-10px;top:-10px}.fb_dialog_top_right{background:url(http://static.ak.fbcdn.net/rsrc.php/v2/ye/r/8YeTNIlTZjm.png) no-repeat 0 -10px;right:-10px;top:-10px}.fb_dialog_bottom_left{background:url(http://static.ak.fbcdn.net/rsrc.php/v2/ye/r/8YeTNIlTZjm.png) no-repeat 0 -20px;bottom:-10px;left:-10px}.fb_dialog_bottom_right{background:url(http://static.ak.fbcdn.net/rsrc.php/v2/ye/r/8YeTNIlTZjm.png) no-repeat 0 -30px;right:-10px;bottom:-10px}.fb_dialog_vert_left,.fb_dialog_vert_right,.fb_dialog_horiz_top,.fb_dialog_horiz_bottom{position:absolute;background:#525252;filter:alpha(opacity=70);opacity:.7}.fb_dialog_vert_left,.fb_dialog_vert_right{width:10px;height:100%}.fb_dialog_vert_left{margin-left:-10px}.fb_dialog_vert_right{right:0;margin-right:-10px}.fb_dialog_horiz_top,.fb_dialog_horiz_bottom{width:100%;height:10px}.fb_dialog_horiz_top{margin-top:-10px}.fb_dialog_horiz_bottom{bottom:0;margin-bottom:-10px}.fb_dialog_iframe{line-height:0}.fb_dialog_content .dialog_title{background:#6d84b4;border:1px solid #3b5998;color:#fff;font-size:14px;font-weight:bold;margin:0}.fb_dialog_content .dialog_title>span{background:url(http://static.ak.fbcdn.net/rsrc.php/v2/yd/r/Cou7n-nqK52.gif) no-repeat 5px 50%;float:left;padding:5px 0 7px 26px}body.fb_hidden{-webkit-transform:none;height:100%;margin:0;overflow:visible;position:absolute;top:-10000px;left:0;width:100%}.fb_dialog.fb_dialog_mobile.loading{background:url(http://static.ak.fbcdn.net/rsrc.php/v2/ya/r/3rhSv5V8j3o.gif) white no-repeat 50% 50%;min-height:100%;min-width:100%;overflow:hidden;position:absolute;top:0;z-index:10001}.fb_dialog.fb_dialog_mobile.loading.centered{max-height:590px;min-height:590px;max-width:500px;min-width:500px}#fb-root #fb_dialog_ipad_overlay{background:rgba(0, 0, 0, .45);position:absolute;left:0;top:0;width:100%;min-height:100%;z-index:10000}#fb-root #fb_dialog_ipad_overlay.hidden{display:none}.fb_dialog.fb_dialog_mobile.loading iframe{visibility:hidden}.fb_dialog_content .dialog_header{-webkit-box-shadow:white 0 1px 1px -1px inset;background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#738ABA), to(#2C4987));border-bottom:1px solid;border-color:#1d4088;color:#fff;font:14px Helvetica, sans-serif;font-weight:bold;text-overflow:ellipsis;text-shadow:rgba(0, 30, 84, .296875) 0 -1px 0;vertical-align:middle;white-space:nowrap}.fb_dialog_content .dialog_header table{-webkit-font-smoothing:subpixel-antialiased;height:43px;width:100%}.fb_dialog_content .dialog_header td.header_left{font-size:12px;padding-left:5px;vertical-align:middle;width:60px}.fb_dialog_content .dialog_header td.header_right{font-size:12px;padding-right:5px;vertical-align:middle;width:60px}.fb_dialog_content .touchable_button{background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#4966A6), color-stop(.5, #355492), to(#2A4887));border:1px solid #29447e;-webkit-background-clip:padding-box;-webkit-border-radius:3px;-webkit-box-shadow:rgba(0, 0, 0, .117188) 0 1px 1px inset, rgba(255, 255, 255, .167969) 0 1px 0;display:inline-block;margin-top:3px;max-width:85px;line-height:18px;padding:4px 12px;position:relative}.fb_dialog_content .dialog_header .touchable_button input{border:none;background:none;color:#fff;font:12px Helvetica, sans-serif;font-weight:bold;margin:2px -12px;padding:2px 6px 3px 6px;text-shadow:rgba(0, 30, 84, .296875) 0 -1px 0}.fb_dialog_content .dialog_header .header_center{color:#fff;font-size:16px;font-weight:bold;line-height:18px;text-align:center;vertical-align:middle}.fb_dialog_content .dialog_content{background:url(http://static.ak.fbcdn.net/rsrc.php/v2/y9/r/jKEcVPZFk-2.gif) no-repeat 50% 50%;border:1px solid #555;border-bottom:0;border-top:0;height:150px}.fb_dialog_content .dialog_footer{background:#f2f2f2;border:1px solid #555;border-top-color:#ccc;height:40px}#fb_dialog_loader_close{float:left}.fb_dialog.fb_dialog_mobile .fb_dialog_close_button{text-shadow:rgba(0, 30, 84, .296875) 0 -1px 0}.fb_dialog.fb_dialog_mobile .fb_dialog_close_icon{visibility:hidden}
.fb_iframe_widget{display:inline-block;position:relative}.fb_iframe_widget span{display:inline-block;position:relative;text-align:justify}.fb_iframe_widget iframe{position:absolute}.fb_iframe_widget_lift{z-index:1}.fb_hide_iframes iframe{position:relative;left:-10000px}.fb_iframe_widget_loader{position:relative;display:inline-block}.fb_iframe_widget_fluid{display:inline}.fb_iframe_widget_fluid span{width:100%}.fb_iframe_widget_loader iframe{min-height:32px;z-index:2;zoom:1}.fb_iframe_widget_loader .FB_Loader{background:url(http://static.ak.fbcdn.net/rsrc.php/v2/y9/r/jKEcVPZFk-2.gif) no-repeat;height:32px;width:32px;margin-left:-16px;position:absolute;left:50%;z-index:4}
.fbpluginrecommendationsbarleft,.fbpluginrecommendationsbarright{position:fixed !important;bottom:0;z-index:999}.fbpluginrecommendationsbarleft{left:10px}.fbpluginrecommendationsbarright{right:10px}</style></head>
<body>
<div id="dialog-notifications-success" title="Notification" style="display:none; width:600px;">
</div>
<div id="dialog-notifications-error" title="Error" style="display:none;">
</div>
<div id="bar-notification" class="bar-notification">
<img src="/Content/Images/ico-close-notification-bar.png" class="close" alt="Close" title="Close">
</div>
<div class="headerwrapper">
<div class="header ">
<div class="container top-header-container shadowwrapper">
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-4">
<div class="header-logo">
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
<link href="/themes/ProcoDefault/Content/flyout/flyout.css" rel="stylesheet" type="text/css">
<script src="/themes/ProcoDefault/Content/flyout/flyout.js" type="text/javascript"></script>
<div class="social_container_login">
<div class="social_container">
<div><a target="_blank" href="http://www.facebook.com/pages/Brookhaven-Marketplace/33148540039"><img src="/Content/Images/uploaded/social/big_facebook_icon.png" alt="Facebook"></a></div>
<div><a target="_blank" href="https://twitter.com/#!/brookhavenmkt"><img src="/Content/Images/uploaded/social/Twitter.png" alt="Twitter"></a></div>
<div><a target="_blank" href="http://pinterest.com/brookhavenmkrt/"><img src="/Content/Images/uploaded/social/icon_pinterest.png" alt="Pinterest"></a></div>
</div>
<div class="login">
My Account
</div>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
<a class="see-u-picks" href="../../../specialcouponoffer"><img class="img-responsive" src="/content/images/uploaded/See-current-upick-offer-btn.png"></a>
</div>
<div id="login-box" class="login-popup">
<img src="/Content/Images/uploaded/close_pop.png" class="btn_close" title="Close Window" alt="Close">
<div class="header-links">
<h1>My Account</h1>
<ul>
<li>Shopping List</li>
<li>Preferences</li>
<li>Log out</li>
<li id="topcartlink">Shopping cart
(16)
</li>
<script type="text/javascript">
$('#topcartlink').live('mouseenter', function () {
$('#flyout-cart').addClass('active');
});
$('#topcartlink').live('mouseleave', function () {
$('#flyout-cart').removeClass('active');
});
$('#flyout-cart').live('mouseenter', function () {
$('#flyout-cart').addClass('active');
});
$('#flyout-cart').live('mouseleave', function () {
$('#flyout-cart').removeClass('active');
});
</script>
<li>Wishlist <a href="/wishlist" class="wishlist-qty">
(1)</a> </li>
</ul>
</div>
<div class="topdownclickme">
<div class="ico-myaccount">My Account</div></div>
<script>$('.topdownclickme').click(function() {
$('.header-links').slideToggle('slow', function() {
// Animation complete.
});
});
</script>
</div>
</div>
</div>
<div class="header-selectors-wrapper">
<div class="header-taxdisplaytypeselector">
</div>
<div class="header-currencyselector">
</div>
<div class="header-languageselector">
</div>
</div>
</div>
<div class="top-header-menu">
<link media="print" rel="stylesheet" type="text/css" href="/themes/ProcoDefault/Content/print.css">
<link rel="stylesheet" type="text/css" href="/themes/ProcoDefault/Content/nav/superfish.css" media="screen">
<script type="text/javascript" src="/Scripts/hoverIntent.js"></script>
<script type="text/javascript" src="/Scripts/superfish.js"></script>
<script type="text/javascript">
// initialise plugins
jQuery(function(){
jQuery('ul.sf-menu').superfish();
});
</script>
<div class="container shadowwrapper ">
<div class="row">
<div class="col-lg-12 col-md-12 ">
<div class="headermenu">
<nav role="navigation" class="navbar navbar-inverse">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button data-target="#top-header-menu-proco" data-toggle="collapse" class="navbar-toggle collapsed" type="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div id="top-header-menu-proco" class="navbar-collapse collapse" style="height: 1px;">
<ul class="nav navbar-nav">
<li><span class="glyphicon glyphicon-home"></span></li>
<li>
<a href="/books">Books
</a>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Computers
<i class="fa fa-angle-down"></i>
</a>
<ul class="dropdown-menu">
<li>
<a href="/desktops">Desktops
</a>
</li>
<li>
<a href="/notebooks">Notebooks
</a>
</li>
<li>
<a href="/accessories">Accessories
</a>
</li>
<li>
<a href="/software-games">Software & Games
</a>
</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Electronics
<i class="fa fa-angle-down"></i>
</a>
<ul class="dropdown-menu">
<li>
<a href="/camera-photo">Camera, photo
</a>
</li>
<li>
<a href="/cell-phones">Cell phones
</a>
</li>
</ul>
</li>
<li>
<a href="/apparel-shoes">Apparel & Shoes
</a>
</li>
<li>
<a href="/digital-downloads">Digital downloads
</a>
</li>
<li>
<a href="/jewelry">Jewelry
</a>
</li>
<li>
<a href="/gift-cards">Gift Cards
</a>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
</div><!-- /.container-fluid -->
</div>
</div>
</div>
</div>
</div>
<div class="background-wrapper">
<div class="#*master-wrapper-page*#">
<div class="#*master-wrapper-content*#">
<script type="text/javascript">
//<![CDATA[
//replace the first parameter with "true" to use popup notifications
AjaxCart.init(true, '.header-links .cart-qty', '.header-links .wishlist-qty', '#flyout-cart');
//]]>
</script>
<div class="ajax-loading-block-window" style="display: none">
<div class="loading-image">
</div>
</div>
<div class="white-background container shadowwrapper">
<div class="">
<div class="row">
<div class="col-md-3 ">
<div class="htmlcontent">
<div class="htmlcontent-body">
<div class="left-nav">
<ul>
<li><img src="/Content/Images/uploaded/HomePageLeft/glutenfree_promo.png" alt="" width="280" height="184"></li>
<li><img src="http://brookhavenmarket.com/Content/Images/uploaded/HomePageLeft/winegeek.jpg" alt="" width="265" height="185"></li>
<!-- <li><img width="280" height="184" src="/Content/Images/uploaded/HomePageLeft/glutenfree_promo.png" /></li> -->
<li><img src="/Content/Images/uploaded/HomePageLeft/lifetime_fitness_button.jpg" alt="" width="232" height="185"></li>
<!--<li><img src="/Content/Images/uploaded/HomePageLeft/catering_promo.jpg" height="184" width="338" /></li>--></ul>
</div>
</div>
</div>
<div class="clear">test
</div>
</div>
<div class="col-md-9 ">
<div class="">
<link rel="stylesheet" href="/themes/ProcoDefault/Content/flexslider/flexslider.css" type="text/css">
<script src="/Scripts/jquery.flexslider.js"></script>
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider({
slideshowSpeed: 5000
});
});
</script>
<div class="homepage_container">
<div id="fb-root" class=" fb_reset"><div style="position: absolute; top: -10000px; height: 0px; width: 0px;"><div><iframe name="fb_xdm_frame_http" frameborder="0" allowtransparency="true" scrolling="no" id="fb_xdm_frame_http" aria-hidden="true" title="Facebook Cross Domain Communication Frame" tabindex="-1" src="http://static.ak.facebook.com/connect/xd_arbiter/KFZn1BJ0LYk.js?version=41#channel=f2cbd788b4&origin=http%3A%2F%2Flocalhost%3A38451" style="border: none;"></iframe><iframe name="fb_xdm_frame_https" frameborder="0" allowtransparency="true" scrolling="no" id="fb_xdm_frame_https" aria-hidden="true" title="Facebook Cross Domain Communication Frame" tabindex="-1" src="https://s-static.ak.facebook.com/connect/xd_arbiter/KFZn1BJ0LYk.js?version=41#channel=f2cbd788b4&origin=http%3A%2F%2Flocalhost%3A38451" style="border: none;"></iframe></div></div><div style="position: absolute; top: -10000px; height: 0px; width: 0px;"><div></div></div></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="homepagebanners"> <div class="htmlcontent">
<div class="htmlcontent-body">
<div class="flexslider">
<ul class="slides">
<li class="flex-active-slide" style="width: 100%; float: left; margin-right: -100%; position: relative; display: list-item; opacity: 0.347983469537255;"><img src="http://brookhavenmarket.com/Content/Images/uploaded/HomeBanners/Easter-Menu-banner.jpg" alt="" width="634" height="216"></li>
<li style="width: 100%; float: left; margin-right: -100%; position: relative; display: none;" class=""><img src="../../../Content/Images/uploaded/HomeBanners/4-16-2014-1.jpg" alt="" width="634" height="216"></li>
<li style="width: 100%; float: left; margin-right: -100%; position: relative; display: none;" class=""><img src="../../../Content/Images/uploaded/HomeBanners/4-16-2014-2.jpg" alt="" width="634" height="216"></li>
<li style="width: 100%; float: left; margin-right: -100%; position: relative; display: none;" class=""><img src="http://www.brookhavenmarket.com/Content/Images/uploaded/HomeBanners/2013_catering_banner.jpg" alt="" width="634" height="216"></li>
<li style="width: 100%; float: left; margin-right: -100%; position: relative; display: none;" class=""><img src="http://brookhavenmarket.com/Content/Images/uploaded/HomeBanners/gluten-free-banner.jpg" alt="" width="634" height="216"></li>
<li style="width: 100%; float: left; margin-right: -100%; position: relative; display: list-item; opacity: 0.652016530462745;" class=""><img src="../../../Content/Images/uploaded/HomeBanners/help_wanted.jpg" alt="" width="634" height="216"></li>
</ul>
<ol class="flex-control-nav flex-control-paging"><li><a class="flex-active">1</a></li><li><a class="">2</a></li><li><a class="">3</a></li><li><a class="">4</a></li><li><a class="">5</a></li><li><a class="">6</a></li></ol><ul class="flex-direction-nav"><li><a class="flex-prev" href="#">Previous</a></li><li><a class="flex-next" href="#">Next</a></li></ul></div>
</div>
</div>
</div>
<div class="homepagebottom"> <div class="htmlcontent">
<div class="htmlcontent-body">
<div class="homepageBlogContainer">
<p class="homepageBlogText"><span style="font-size: medium;"><strong><em>Easter Traditions with a Twist</em></strong></span></p>
<p>Easter is always a busy time at a food store ranking up there with the likes of Christmas and Thanksgiving as traditionally it’s a time when families gather together to share a meal. Not just any meal but what most would consider a feast. It’s a time when traditional foods that we have loved since childhood are planned, shopped for and prepared with great care and attention to detail. It’s a time when on most cases paper plates and plastic flatware are foregone in deference to Mom’s best china, crystal and silverware. Last week’s blog focused on our sweet tooth with suggested Easter Desserts. This week let’s concentrate on the main course....</p>
<p><span style="font-family: Arial, sans-serif;"><span style="font-size: small;"><span lang="en-US">Okay, perhaps not. But we can still hope, can’t we?</span></span></span></p>
<p><span style="color: #800000;"><strong><span style="font-family: Arial, sans-serif;"><span style="font-size: small;"><span lang="en-US"> ...</span></span></span><a style="font-size: small; font-family: Arial, sans-serif;" href="http://www.brookhavenmarket.com/blog"><span style="color: #800000;">read more</span></a></strong></span></p>
<div class="readmore"><img src="/Content/Images/uploaded/arrow.png" alt="" align="right"></div>
</div>
<div style="float: left;"><iframe style="width: 338px; height: 346px; overflow: hidden;" src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FBrookhaven-Marketplace%2F33148540039&width=340&colorscheme=light&show_faces=false&stream=true&header=true&height=346" width="320" height="240" frameborder="0" scrolling="no"></iframe></div>
</div>
</div>
</div>
<div class="clear">
</div>
<div class="clear">
</div>
</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer-wrapper">
<div class="container shadowwrapper">
<div class="row">
<div class="col-md-12">
<div class="footer ">
<div class="clear" style="height:1px"></div>
<img class="proco-logo" src="../themes/ProcoDefault/Content/images/proco_logo.png">
</div>
</div>
</div>
</div>
</div>
<div class="footer-disclaimer">
Copyright © 2014 Brookhaven Market. All rights reserved.
</div>
<div class="footer-storetheme">
</div>
</body></html>
I am using jquery-1.10.2.min.js. What could be the problem? There is showing no problem in console too. I already used navbar in many sites but never saw that kind of problem before. Please Help.

Bootstrap relies on jQuery but in your code you have presented the files for Bootstrap first. Change the order and it will work. Additionally you need to ensure your paths are correct as you seem to be missing the name of the theme.
As you mention in the comments, your code to include the scripts is:
Html.AppendScriptParts("~/Scripts/jquery.validate.unobtrusive.min.js");
Html.AppendScriptParts("~/Scripts/jquery.validate.min.js");
Html.AppendScriptParts("~/Themes/Content/bootstrap-3.2.0/js/bootstrap.min.js");
Html.AppendScriptParts("~/Scripts/jquery-1.10.2.min.js");
Simply change the order of the last 2 lines like this:
Html.AppendScriptParts("~/Scripts/jquery.validate.unobtrusive.min.js");
Html.AppendScriptParts("~/Scripts/jquery.validate.min.js");
Html.AppendScriptParts("~/Scripts/jquery-1.10.2.min.js");
Html.AppendScriptParts("~/Themes/ProcoDefault/Content/bootstrap-3.2.0/js/bootstrap.min.js");

Show correct thumnail image in the popup

I am working on magnific-popup gallery and trying to achieve gallery design as show in image below
So far i managed to make it look like as it is show in image. But it always show image from the first image irrespective of which mage we click in the image gallery.
here is the codepen example http://codepen.io/anon/pen/LvFxH
I am not sure how to fix it so that it can start the sequence from image user click on and also hide left or right arrow it is first or last image in the galler
CODE
<div id="gallery1" class="mfp-hide">
<div class="slide">
<div class="imgg"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/Anthochaera_chrysoptera.jpg/800px-Anthochaera_chrysoptera.jpg" /> </div>
<div class="detailss">
<span class="d-title">This is the caption of the image along with some other information</span>
<span class="d-hr">Download</span>
<span class="d-date">01-01-2014</span>
</div>
</div>
<div class="slide">
<div class="imgg"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/Water_Dolphin.jpg/800px-Water_Dolphin.jpg" /> </div>
<div class="detailss">
<span class="d-title">This is image two</span>
<span class="d-hr">Download</span>
<span class="d-date">02-02-2014</span>
</div>
</div>
<div class="slide">
<div class="imgg"><img src="http://i1232.photobucket.com/albums/ff372/Marcin_Gil/magnific%20example/flower1.jpg" /> </div>
<div class="detailss">
<span class="d-title">This is image three</span>
<span class="d-hr">Download</span>
<span class="d-date">03-03-2014</span>
</div>
</div>
</div>
<a href="#gallery1" class="open-gallery-link">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/Anthochaera_chrysoptera.jpg/800px-Anthochaera_chrysoptera.jpg" width="172" height="115" />
</a>
<a href="#gallery1" class="open-gallery-link">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/Water_Dolphin.jpg/800px-Water_Dolphin.jpg" width="172" height="115" />
</a>
<a href="#gallery1" class="open-gallery-link">
<img src="http://i1232.photobucket.com/albums/ff372/Marcin_Gil/magnific%20example/flower1.jpg" width="172" height="115" />
</a>

You have some incorrect code... this is my code:
Live Demo on JSFiddle
Demo 2 - Next/Prev Button
HTML
<div id='gallery'>
<div class='imgwrapper'>
<img src='http://8pic.ir/images/6s75jpffwom32fhct7q4.jpg' title='' alt=''/>
<span class='date'>15-02-2013</span>
<span class='info'>This is the caption of the image along with some other information</span>
<a href='http://gah-blog.blogspot.com/'>download</a>
</div>
<div class='imgwrapper'>
<img src='http://8pic.ir/images/ypzla17xaqmhjiocih64.jpg' title='' alt=''/>
<span class='date'>10-07-2013</span>
<span class='info'>This is the caption of the image along with some other information</span>
<a href='http://gah-blog.blogspot.com/'>download</a>
</div>
<div class='imgwrapper'>
<img src='http://8pic.ir/images/tuwvju35ajgts0rxzufw.jpg' title='' alt=''/>
<span class='date'>21-10-2013</span>
<span class='info'>This is the caption of the image along with some other information</span>
<a href='http://gah-blog.blogspot.com/'>download</a>
</div>
<div class='imgwrapper'>
<img src='http://8pic.ir/images/usra1shyel8nxudsj8vs.jpg' title='' alt=''/>
<span class='date'>02-02-2014</span>
<span class='info'>This is the caption of the image along with some other information</span>
<a href='http://gah-blog.blogspot.com/'>download</a>
</div>
<div class='imgwrapper'>
<img src='http://8pic.ir/images/vp7wnu7ohpx2i3im6nem.jpg' title='' alt=''/>
<span class='date'>20-05-2014</span>
<span class='info'>This is the caption of the image along with some other information</span>
<a href='http://gah-blog.blogspot.com/'>download</a>
</div>
</div>
<div id="popupbg">
<div id="popup">
<img src='' title='' alt=''/>
<span class='date'></span>
<span class='info'></span>
<a href=''>download</a>
<span class="btn" id="close">Close</span>
</div>
</div>
CSS
#gallery{
position:relative;
width:100%;
background:#e7e7e7;
}
.imgwrapper{
position:relative;
width:150px;
height:150px;
display:inline-block;
}
.imgwrapper img{
width:150px;
height:150px;
}
.imgwrapper span,.imgwrapper a{
display:none;
}
#popupbg{
display:none;
position:fixed;
top:0;
left:0;
height:100%;
width:100%;
background:rgba(0,0,0,0.92);
z-index:1000;
}
#popup{
position:relative;
top:5%;
margin:0 auto;
font-size:17px;
width:70%;
height:65%;
background:#fff;
padding:20px;
border:solid 10px #CCCCCC;
}
#popup img{
position:relative;
display:block;
width:95%;
height:200px;
}
#popup span.date,#popup span.info,#popup span#close{
display:block;
}
jQuery
$(document).ready(function(e) {
$(".imgwrapper").click(function(){
var img=$(' > img', this).attr("src");
var date=$(' > span.date', this).html();
var info=$(' > span.info', this).html();
var a=$(' > a', this).attr("href");
$('#popup img').attr("src",img);
$('#popup span.date').html(date);
$('#popup span.info').html(info);
$('#popup a').attr("href",a);
user_guide()
});
});
function user_guide(){
$("#popupbg").fadeToggle("slow");
}
$(document).ready(function(e) {
$("#close").click(function(){
$("#popupbg").fadeToggle("slow");
});
});

Loading a tab on button click

I am not that much familiar with button html or jquery so please forgive if this is a repeated question or if I asked it wrong. What i want to do is is to load a tab on an external button click. The code for the tabs are as follows,
<div id="wrapper">
<div id="content">
<div class="c1">
<div class="controls">
</div>
<div class="tabs">
<div id="tab-1" class="tab">
<article>
<div class="text-section">
<h1>Dashboard</h1>
<p>TVAS data visualizer</p>
</div>
<div style="margin-top: 10px;margin-left: 10px;width: 21%;height: 20px; float: left">
<input type="button" id="btn" name="btn" value="Button" />
<div style="margin-left: 15px; float: left">
Filter :
</div>
<div id='jqxdropdown' style="margin-left: 5px; float: left">
</div>
</div>
<div style="margin-top: 10px;width: 78%;height: 20px; float: right">
<div id='jqxcalendar' style="margin-left: 10px;float: left;"></div>
<div style="margin-left: 10px;float: left;">
<input id="filterButton" type="button" value="Filter"/>
</div>
<div style="margin-left: 10px; float: left">
<font size="1" color="red">
*Filter by ISP only applies to the bar/pie chart
</font>
</div>
</div>
<div id="barChartdiv" style="margin-top: 10px;width:60%; height: 400px;float: left;"></div>
<div id="pieChartDiv" style="margin-top: 10px;width:40%; height: 400px;float: right;"></div>
<div id="linechartdiv" style="width: 100%; height: 500px;float: left;"></div>
</article>
</div>
<div id="tab-2" class="tab">
<article>
<div class="text-section">
<h1>Map view</h1>
<p>TVAS birds eye view</p>
</div>
<div id="google_map_canvas" style="margin-top: 10px;width:1450px; height: 650px;float: left;">
</div>
<div id="over_map">
<input id="outgoingButton" type="button" value="Outgoing"/>
<input id="incomingButton" type="button" value="Incomng"/>
</div>
</article>
</div>
<div id="tab-3" class="tab">
<article>
<div class="text-section">
<h1>Dashboard</h1>
<p>TVAS trend visualizer</p>
</div>
</article>
</div>
</div>
</div>
</div>
<aside id="sidebar">
<strong class="logo">lg</strong>
<ul class="tabset buttons">
<li class="active">
<span>Dashboard</span><em></em>
<span class="tooltip"><span>Dashboard</span></span>
</li>
<li>
<span>Map visualization</span><em></em>
<span class="tooltip"><span>Map visualization</span></span>
</li>
<li>
<span>Trending</span><em></em>
<span class="tooltip"><span>Trending</span></span>
</li>
</ul>
<span class="shadow"></span>
</aside>
</div>
what this code currently does is when the user clicks on the necessary sidebar element it loads its corresponding div to the left of the page. what I need to do the same by clicking on a button jquery or javascript which is situated in the header area of the page.
for example something like this,
<script type="text/javascript">
$(document).ready(function () {
$("input[name='btn']").click(function() {
//code to display the contents of a tab
});
});
</script>
any help would be much helpful :) I don't know how to make this question even more clearer. hope its understandable Thank you :)

I think this will work, I'm sure there is a more concise way though.
$("#tab-1").click(function() {
$(".tab").hide();
$("#tab-1").show();
});
$("#tab-2").click(function() {
$(".tab").hide();
$("#tab-2").show();
});
$("#tab-3").click(function() {
$(".tab").hide();
$("#tab-3").show();
});
Update: This actually works (be sure to change the class and id selectors to your naming convention), as tested here.
$().ready(function() {
$(".show-tab").click(function() {
$(".tab").hide();
var tabid = $(this).attr("id").substring(5);
$("#"+tabid).show();
});
$("#show-tab-1").click();
});