Develop Reference

Same div ID on page to collapsed

I have two div on same page with same id. I want explore description of one div. In my case if i click on div then all desc are expand.
$(document).ready(function() {
var collapsed = "image";
$("#shw_desc").click(function() {
if ($(".desc").is(":visible")) {
$(".desc").slideUp();
$("#shw_desc_icon img").attr("src", collapsed).css("transform", "rotate(0deg)");
} else {
$(".desc").slideDown();
$("#shw_desc_icon img").attr("src", collapsed).css("transform", "rotate(180deg)");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="shw_desc" style="background-color: #dfdfdf;font-size: 14px;float: left;padding: 4px 12px;width: 90.3%;color: #666;" class="nt_selected">
<span>Description</span><span id="shw_desc_icon" style="float:right;" class="glyphicon glyphicon-chevron-right"><img class="block-hider-hide" alt="Hide Administration block" src="image" tabindex="0" title="Hide Administration block"></span>
</div>
<div class="desc" style="display:none;border: 1px solid #eee;padding: 6px 12px;color: #999;font-size: 13px;width:90%;float: left;">
<p>Some Description</p>
</div>
<div id="shw_desc" style="background-color: #dfdfdf;font-size: 14px;float: left;padding: 4px 12px;width: 90.3%;color: #666;" class="nt_selected">
<span>Description 2</span><span id="shw_desc_icon" style="float:right;" class="glyphicon glyphicon-chevron-right"><img class="block-hider-hide" alt="Hide Administration block" src="image" tabindex="0" title="Hide Administration block"></span>
</div>
<div class="desc" style="display:none;border: 1px solid #eee;padding: 6px 12px;color: #999;font-size: 13px;width:90%;float: left;">
<p>Some Description 2</p>
</div>

I have two div on same page with same id
This is invalid in HTML. id attributes must be unique within a page. Change the markup to use a common class attribute on those elements instead.
From there you can use the this keyword to reference the element that raised the click event and find the related elements which should be amended.
Also note that you can simplify the logic in your JS code by using slideToggle() and toggleClass() over an if statement, and you can simplify the HTML by putting the inline styles in to a stylesheet. Try this:
$(document).ready(function() {
var collapsed = "image";
$(".shw_desc").click(function() {
$(this).toggleClass('open').next('.desc').slideToggle();
$(this).find(".shw_desc_icon img").attr("src", collapsed);
});
});
.shw_desc {
background-color: #dfdfdf;
font-size: 14px;
float: left;
padding: 4px 12px;
width: 90.3%;
color: #666
}
.shw_desc_icon {
float: right;
transform: rotate(0deg);
}
.shw_desc.open .shw_desc_icon {
transform: rotate(180deg);
}
.desc {
display: none;
border: 1px solid #eee;
padding: 6px 12px;
color: #999;
font-size: 13px;
width: 90%;
float: left;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="shw_desc nt_selected">
<span>Description 1</span>
<span class="shw_desc_icon glyphicon glyphicon-chevron-right">
<img class="block-hider-hide" alt="Hide Administration block" src="image" tabindex="0" title="Hide Administration block">
</span>
</div>
<div class="desc">
<p>Some Description 1</p>
</div>
<div class="shw_desc nt_selected">
<span>Description 2</span>
<span class="shw_desc_icon glyphicon glyphicon-chevron-right">
<img class="block-hider-hide" alt="Hide Administration block" src="image" tabindex="0" title="Hide Administration block">
</span>
</div>
<div class="desc">
<p>Some Description 2</p>
</div>

Identifiers should be unique and is considered invalid Html.
I recommend to ensure to use either a class or data attribute to select your elements and what ever generates the Html ensures unique identifiers are used,..or leave them out all together if not needed.
However, assuming you might not be able to change the generated HTML I will be using your exact markup and only apply the least amount
of changes in the script to make it work.
For the click event you can use [id=identifier] instead of #identifier in your selector, like this $("[id=shw_desc]").click(function() {
This works as selecting by attribute can return multiple results, however, when selecting by identifier $(#...) jQuery will only return the first match.
Within the click event handler code, make sure you always stay within the current context.
This applies, regardless what selector you are using to bind the click handler.
If a shw_desc has been clicked, you don't want to process all .desc elements but only the one next to the current shw_desc that was clicked.
Same for #shw_desc_icon img, you only want to process the image located within the shw_desc that was clicked and not all the others on the page. For this you can use a selector similar to $("#shw_desc_icon img", this)
$(document).ready(function() {
var collapsed = "image";
// Select by attribute to bind to ALL shw_desc elements not just the first one
$("[id=shw_desc]").click(function() {
var $desc = $(this).next('.desc'); //Get the .desc element next to the current context.
if ($desc.is(":visible")) {
$desc.slideUp();
// Use ',this' to ensure you only query for #shw_desc_icon within the current context.
$("#shw_desc_icon img", this).attr("src", collapsed).css("transform", "rotate(0deg)");
} else {
$desc.slideDown();
$("#shw_desc_icon img", this).attr("src", collapsed).css("transform", "rotate(180deg)");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="shw_desc" style="background-color: #dfdfdf;font-size: 14px;float: left;padding: 4px 12px;width: 90.3%;color: #666;" class="nt_selected">
<span>Description</span><span id="shw_desc_icon" style="float:right;" class="glyphicon glyphicon-chevron-right"><img class="block-hider-hide" alt="Hide Administration block" src="image" tabindex="0" title="Hide Administration block"></span>
</div>
<div class="desc" style="display:none;border: 1px solid #eee;padding: 6px 12px;color: #999;font-size: 13px;width:90%;float: left;">
<p>Some Description</p>
</div>
<div id="shw_desc" style="background-color: #dfdfdf;font-size: 14px;float: left;padding: 4px 12px;width: 90.3%;color: #666;" class="nt_selected">
<span>Description 2</span><span id="shw_desc_icon" style="float:right;" class="glyphicon glyphicon-chevron-right"><img class="block-hider-hide" alt="Hide Administration block" src="image" tabindex="0" title="Hide Administration block"></span>
</div>
<div class="desc" style="display:none;border: 1px solid #eee;padding: 6px 12px;color: #999;font-size: 13px;width:90%;float: left;">
<p>Some Description 2</p>
</div>
Again, having said all that, try to get rid of the duplicate identifiers and use other common attributes of those elements to select them.
Of course, context awareness still applies just the same.

Or the idea
$(document).ready(function() {
var collapsed = "image";
$(".meclick").click(function() {
var $box = $(this).parents('.box:first');
if(!$box.find('.desc:first').hasClass('visible'))
{
$box.find('.desc:first').addClass('visible');
$box.find('.desc:first').slideDown();
$box.find('.desc:first').find("#shw_desc_icon img:first").attr("src", collapsed).css("transform", "rotate(0deg)");
}
else
{
$box.find('.desc:first').removeClass('visible');
$box.find('.desc:first').slideUp();
$box.find('.desc:first').find("#shw_desc_icon img:first").attr("src", collapsed).css("transform", "rotate(180deg)");
}
});
});
.visible{}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<div id="shw_desc" style="background-color: #dfdfdf;font-size: 14px;float: left;padding: 4px 12px;width: 90.3%;color: #666;" class="meclick nt_selected">
<span>Description</span><span id="shw_desc_icon" style="float:right;" class="glyphicon glyphicon-chevron-right"><img class="block-hider-hide" alt="Hide Administration block" src="image" tabindex="0" title="Hide Administration block"></span>
</div>
<div class="desc" style="display:none;border: 1px solid #eee;padding: 6px 12px;color: #999;font-size: 13px;width:90%;float: left;">
<p>Some Description</p>
</div>
</div>
<div class="box">
<div id="shw_desc" style="background-color: #dfdfdf;font-size: 14px;float: left;padding: 4px 12px;width: 90.3%;color: #666;" class="meclick nt_selected">
<span>Description 2</span><span id="shw_desc_icon" style="float:right;" class="glyphicon glyphicon-chevron-right"><img class="block-hider-hide" alt="Hide Administration block" src="image" tabindex="0" title="Hide Administration block"></span>
</div>
<div class="desc" style="display:none;border: 1px solid #eee;padding: 6px 12px;color: #999;font-size: 13px;width:90%;float: left;">
<p>Some Description 2</p>
</div>
</div>

How to create a list item with an icon on the left, center and right?

I am creating a ionic app that uses the Spotify API. I want to create a widget that is a list item with an icon on the left(last-song), center(play/pause) and right(next-song) icons. I'm having trouble creating a list item with the three icons. Here is my code...
<div class="list card">
<div class="item item-icon-left item-icon-center item-icon-right">
<i class="icon ion-ios-rewind"></i>
<i class="icon ion-play"></i>
<i class="icon ion-ios-fastfoward"></i>
</div>
</div>

try this :)
<div class="list card">
<div class="item item-icon-left item-icon-center item-icon-right">
<p style="float: left; width: 34%; text-align: left;">last</p>
<p style="float: left; width: 33%; text-align: center;">play/pause</p>
<p style="float: left; width: 33%; text-align: right;">next</p>
</div>
</div>

Issue with firing one script canceling another script when used before the other

So I have a page where one script allows user to copy contents to clipboard and then another angular script that toggles a showing of a text editor. The issue here is if the selects the 'add notes' button (called the ng-click="showEditor"), then the copy to clipboard function ceases to work. Not sure why one is canceling the other. The code:
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-74074881-2', 'auto');
ga('send', 'pageview');
</script>
<style type="text/css">
#media screen {
#printSection {
display: none;
}
}
#media print {
body * {
visibility:hidden;
}
#printSection, #printSection * {
visibility:visible;
}
#printSection {
position:absolute;
left:0;
top:0;
}
}
</style>
<div class="container-fluid" style="font-family: Segoe UI; padding: 0;">
<div style="background-color: #0070c0; min-height:100px;">
<h1 style="color: #ffffff; font-size: 24px; padding-left:20px; padding-top: 30px;">Problem Phase Worksheet</h1>
<span style="float: right; font-size: 14px;">Return to Moneyball Site</span>
</div>
<form class="form-horizontal" autocomplete="off" role="form" style="padding-left: 20px; padding-top: 20px;">
<div class="col-md-4">
<div class="form-group">
<span style="color: #0070c0; font-size: 20px;">Inputs</span>
</div>
<div class="form-group">
<label class="control-label" for="criteria" style="font-size: 18px; padding-bottom: 10px;">Criteria:</label>
<span style="color: #afabab;"><i class="fa fa-question-circle" aria-hidden="true" uib-tooltip=" The threshold at which your hypothesis is considered to be true or false.
Examples: “More than 80%”, “Three quarter (75%)”, “Majority (51%-100%)”
"></i></span>
<input type="text" class="form-control" id="criteria" ng-model="criteria" style="font-size: 18px;" placeholder="(e.g. more than 80%)">
</div>
<div class="form-group">
<label class="control-label" for="customer" style="font-size: 18px; padding-bottom: 10px;">Customer:</label>
<span style="color: #afabab;"><i class="fa fa-question-circle" aria-hidden="true" uib-tooltip=" A type of people or organizations to whom eventually you want to offer your product. Note, that sometime in big organizations there is a difference between buyers who purchase a product and end-users who actually use the product.
Examples: “Enterprise system admins”, “Enterprise IT managers”, “Startup developers”, “Academia Data Scientists”
"></i></span>
<input type="text" class="form-control" id="customer" ng-model="customer" style="font-size: 18px;" placeholder="(e.g. enterprise system admins)">
</div>
<div class="form-group">
<label class="control-label" for="task" style="font-size: 18px; padding-bottom: 10px;">Job to be done:</label>
<span style="color: #afabab;"><i class="fa fa-question-circle" aria-hidden="true" uib-tooltip=" The main task for which customers “hire” products and services to get a “job” done. A framework that has been popularized by Clayton Christensen and Anthony Ulwick.
Examples:
“Keeping their servers up to date”, “Planning infrastructure capacity”, “Deploying a mobile app”, “Preparing database for analysis”
"></i></span>
<input type="text" class="form-control" id="task" ng-model="task" style="font-size: 18px;" placeholder="(e.g. keeping servers up to date)">
</div>
<div class="form-group">
<label class="control-label" for="problem" style="font-size: 18px; padding-bottom: 10px;">Problem:</label>
<span style="color: #afabab;"><i class="fa fa-question-circle" aria-hidden="true" uib-tooltip=" The major challenge that customers are facing when performing their Job-To-Be-Done. Note that the problem description needs to be specific and measurable. This can help to estimate a size of the problem and it also can be used as a benchmark for a value proposition provided by your new product.
Examples:
“It takes too long (more than 24 hours)”, “It costs too much (more than $10,000)”, “It require too many tools (five)”
"></i></span>
<input type="text" class="form-control" id="problem" ng-model="problem" style="font-size: 18px;" placeholder="(e.g. it takes to long (24+ hours) )">
</div>
</div>
<div class="col-md-6">
<div>
<span style="color: #0070c0; font-size: 20px;">Examples</span>
<a id="btnPrint" class="btn btn-primary" style="float: right; font-size: 18px;">
<span><i class="fa fa-print" aria-hidden="true"></i></span> Print
</a>
<a class="btn btn-primary" style="float: right; font-size: 18px; margin-right: 10px;" uib-tooltip="copy to clipboard" ngclipboard data-clipboard-target="#printThis" ng-click="steps.copyToast()">
<span><i class="fa fa-files-o" aria-hidden="true"></i></span> Copy
</a>
</div>
<div id="printThis" style="background-color: #ffffff; padding: 15px; margin-top: 20px; border: 1px solid #ccc; border-radius: 8px;" ng-model="problemExp"> <div>
<p style="font-size: 18px; color: #afabab; font-weight: 600;">HYPOTHESIS</p>
<p style="font-size: 18px;" id="hypCriteria">We believe that <span style="color: blue;">{{ criteria || '[criteria]' }}</span> of <span style="color: blue;">{{ (customer != null) ? customer : '[customer]' }}</span> are most frustrated about <span style="color: blue;">{{ (task != null) ? task : '[job to be done]' }}</span> because <span style="color: blue;">{{ problem || '[problem]' }}</span>.</p>
</div>
<div>
<p style="font-size: 18px; color: #afabab; font-weight: 600; margin-top: 25px;">CUSTOMER: SCREENING CRITERIA:</p>
<p style="font-size: 18px;">We are looking for <span style="color: blue;">{{ (customer != null) ? customer : '[customer]' }}</span> who are regularly involved in <span style="color: blue;">{{ (task != null) ? task : '[job to be done]' }}</span>.</p>
</div>
<div>
<p style="font-size: 18px; color: #afabab; font-weight: 600; margin-top: 25px;">EXPERIMENT: INTERVIEW QUESTIONS:</p>
<p style="font-size: 18px;">Thank you for your time and interest in sharing your experiences. You are the expert. We are here to learn from you. I’m going to talk as little as possible.</p>
<a class="btn btn-primary" style="font-size: 18px; margin-bottom: 10px;" ng-click="showEditor()">
<span><i class="fa fa-pencil-square-o" aria-hidden="true"></i></span> Add Notes
</a>
<p style="font-size: 18px;">1. Tell me who is involved in <span style="color: blue;">{{ (task != null) ? task : '[job to be done]' }}</span> at your company?</p>
<div ng-hide="isHidden" style="padding-bottom: 25px; margin-left: 20px;">
<trix-editor angular-trix ng-model="foo"></trix-editor>
</div>
<p style="font-size: 18px;">2. How often are you personally involved in <span style="color: blue;">{{ (task != null) ? task : '[job to be done]' }}</span>?</p>
<div ng-hide="isHidden" style="padding-bottom: 25px; margin-left: 20px;">
<trix-editor angular-trix ng-model="foo"></trix-editor>
</div>
<p style="font-size: 18px;">3. Tell me about the last time when you did <span style="color: blue;">{{ (task != null) ? task : '[job to be done]' }}</span>.</p>
<div ng-hide="isHidden" style="padding-bottom: 25px; margin-left: 20px;">
<trix-editor angular-trix ng-model="foo"></trix-editor>
</div>
<p style="font-size: 18px;">4. What were the major challenges when you were this task?</p>
<div ng-hide="isHidden" style="padding-bottom: 25px; margin-left: 20px;">
<trix-editor angular-trix ng-model="foo"></trix-editor>
</div>
<p style="font-size: 18px;">5. Which of these challenges did you find most frustrating?</p>
<div ng-hide="isHidden" style="padding-bottom: 25px; margin-left: 20px;">
<trix-editor angular-trix ng-model="foo"></trix-editor>
</div>
<p style="font-size: 18px;">6. On a scale of 0-10 (where 10 is extremely frustrating), how frustrating was this experience? Why?</p>
<div ng-hide="isHidden" style="padding-bottom: 25px; margin-left: 20px;">
<trix-editor angular-trix ng-model="foo"></trix-editor>
</div>
<p style="font-size: 18px;">7. Have you done anything to work around these challenges? What?</p>
<div ng-hide="isHidden" style="padding-bottom: 25px; margin-left: 20px;">
<trix-editor angular-trix ng-model="foo"></trix-editor>
</div>
<p style="font-size: 18px;">8. If so, how well did that solve your problem? Why/why not?</p>
<div ng-hide="isHidden" style="padding-bottom: 25px; margin-left: 20px;">
<trix-editor angular-trix ng-model="foo"></trix-editor>
</div>
<p style="font-size: 18px;">9. If you could wave a magic wand and be able to do anything about <span style="color: blue;">{{ (task != null) ? task : '[job to be done]' }}</span> in your daily job, what would it be?</p>
<div ng-hide="isHidden" style="padding-bottom: 25px; margin-left: 20px;">
<trix-editor angular-trix ng-model="foo"></trix-editor>
</div>
<p style="font-size: 18px;">10. What would this allow you to achieve?</p>
<div ng-hide="isHidden" style="padding-bottom: 25px; margin-left: 20px;">
<trix-editor angular-trix ng-model="foo"></trix-editor>
</div>
<p style="font-size: 18px;">11. Who do you know that I should also be talking with? Who else cares a lot about <span style="color: blue;">{{ (task != null) ? task : '[job to be done]' }}</span>?</p>
<div ng-hide="isHidden" style="padding-bottom: 25px; margin-left: 20px;">
<trix-editor angular-trix ng-model="foo"></trix-editor>
</div>
<p style="font-size: 18px;">12. I’ve learned so much from you! Can I ask for your feedback in the future?</p>
<div ng-hide="isHidden" style="padding-bottom: 25px; margin-left: 20px;">
<trix-editor angular-trix ng-model="foo"></trix-editor>
</div>
</div>
</div>
</div>
</form>
</div>
The show editor script is simple:
$scope.isHidden = true;
$scope.showEditor = function () {
$scope.isHidden = $scope.isHidden ? false : true;
}
The copy to clipboard is third party called ng-clipboard. The show editor script is in the controller for this view.
Any ideas or suggestions please?
Thanks much.

why Html form is not displaying over image

I have designed one form below the image. Now, I want to display full responsive image in a background of the form.
I tried to code but the image is displaying inside the form rather than displaying a form on full width and height image.
Where is my mistake?
HTML
<div class="col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3 form-box">
<div class="formhold">
<form role="form" action="" method="post" class="f1" >
<h3>Fill in the form to get Flight</h3>
<div class="f1-steps">
<div class="f1-progress">
<div class="f1-progress-line" data-now-value="16.66" data-number-of-steps="3" style="width: 16.66%;"></div>
</div>
<div class="f1-step active">
<div class="f1-step-icon"><i class="fa fa-user"></i></div>
<p>plan</p>
</div>
<div class="f1-step">
<div class="f1-step-icon"><i class="fa fa-key"></i></div>
<p>schedule</p>
</div>
<div class="f1-step">
<div class="f1-step-icon"><i class="fa fa-twitter"></i></div>
<p>people</p>
</div>
<div class="f1-step">
<div class="f1-step-icon"><i class="fa fa-twitter"></i></div>
<p>about</p>
</div>
</div>
<fieldset>
<h4>I want to go:</h4>
<div class="form-group">
<label class="sr-only" for="f1-first-name">From</label>
<input type="text" name="f1-first-name" placeholder="From..." class="f1-first-name form-control" id="f1-first-name">
</div>
<div class="form-group">
<label class="sr-only" for="f1-last-name">To</label>
<input type="text" name="f1-last-name" placeholder="To..." class="f1-last-name form-control" id="f1-last-name">
</div>
<div class="f1-buttons">
<button type="button" class="btn btn-next">Next</button>
</div>
</fieldset>
</form>
</div>
</div>
CSS
.formhold {
background: url(images/334.jpg);
background-size: cover;
}
form {
display: block;
margin: 0 auto;
}

You almost have the right idea.
I drew up a really quick code-pen mock up you can take a look at:
http://codepen.io/zsawaf/pen/vKRLAP
In summary your mistake was that you needed another container outside of the bootstrap columns that spans the entire page and holds a background image.
HTML:
<div class="container-fluid cover-img">
<div class="row">
<!-- whatever you want your form container to span -->
<div class="col-xs-offset-3 col-xs-6">
<div class="form-container">
<form>
<input type="text"/>
<input type="text"/>
<input type="text"/>
<input type="text"/>
<input type="text"/>
</form>
</div>
</div>
</div>
</div>
SCSS:
.cover-img {
background-image: url(http://previews.123rf.com/images/9nong/9nong1404/9nong140400110/27534018-wood-chip-and-saw-dust-background-compressed-Stock-Photo.jpg);
background-position: center;
background-size: cover;
width: 100vw;
height: 100vh;
}
.form-container {
margin-top: 40px;
padding: 20px;
background-color: rgba(0, 0, 0, 0.6);
border-radius: 5px;
form {
margin: 20px 0;
input {
margin: 5px 0;
width: 100%;
height: 40px;
}
}
}

Like Sinan said, you need to give the form a width and height to match the image size.
I think you can take Sinan's code and combine it with this to expand the form's width and height to match the image size.
Let's say your image size is 1024x768, then:
form {
display: block;
margin: 0 auto;
width: 1024px;
height:768px;
}

You can do it like:
.formhold {
width: 100%;
height: 100%;
opacity: 1;
visibility: inherit;
background-image: url(images/334.jpg)
background-color: rgba(0, 0, 0, 0);
background-size: inherit;
background-position: 50% 50%;
background-repeat: no-repeat;
z-index: 9999;
}

So i'm not sure if that worked for you but the last example was. Adding a wrapper div around the form with the container-fluid class and applying the background to that:
.wrapper {
background: url(images/334.jpg) no-repeat;
background-position: top center;
background-size: 100% auto;
}
And the HTML:
<div class="wrapper container-fluid">
<div class="col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3 form-box">
<div class="formhold">
<form role="form" action="" method="post" class="f1" >
<h3>Fill in the form to get Flight</h3>
<div class="f1-steps">
<div class="f1-progress">
<div class="f1-progress-line" data-now-value="16.66" data-number-of-steps="3" style="width: 16.66%;"></div>
</div>
<div class="f1-step active">
<div class="f1-step-icon"><i class="fa fa-user"></i></div>
<p>plan</p>
</div>
<div class="f1-step">
<div class="f1-step-icon"><i class="fa fa-key"></i></div>
<p>schedule</p>
</div>
<div class="f1-step">
<div class="f1-step-icon"><i class="fa fa-twitter"></i></div>
<p>people</p>
</div>
<div class="f1-step">
<div class="f1-step-icon"><i class="fa fa-twitter"></i></div>
<p>about</p>
</div>
</div>
<fieldset>
<h4>I want to go:</h4>
<div class="form-group">
<label class="sr-only" for="f1-first-name">From</label>
<input type="text" name="f1-first-name" placeholder="From..." class="f1-first-name form-control" id="f1-first-name">
</div>
</div>
Here is the link to the latest jsFiddle.

How to make the pop to stay after clicking on Register or Login button in the Popup [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
Here is this link I am working on. So, I can't able to create jsfiddle as it is the huge template.
The problem is in the top right section (Login).
I can click on the Login and the the pop-up window appears which shows "Login" and "Register".
But if I click on the "Register" tab, then the entire pop-up window disappears.
How can I fix it?
Here is the related html
<i class="dropdown profile-dropdown">
<a id="expandMenus" class="dropdown-toggle" data-toggle="dropdown">
<span class="hidden-xs">
<i class="fa fa-user"></i>
Login</span> <b class="caret"></b>
<i class="bag fa fa-star">0</i>
</a>
<ul class="dropdown-menu dropdown-menu-right" style="min-width: 300px">
<!-- Login starts-->
<div class="col-lg-12" style="background-color:#EFEFEF">
<div class="main-boxallau clearfixallau" style="background-color:#EFEFEF">
<div class="tabs-wrapper profile-tabs" style="background-color:#EFEFEF">
<ul class="nav nav-tabs" style="background-color:#EFEFEF">
<li class="active" style="background-color:#EFEFEF;width:47%;padding:-2px 10px 10px 24px;margin: 0px 0px 0px 5px;">
<a data-toggle="tab" id="showLoginArea" style="color:black;border: 2;
border-bottom: 2px solid #43882C;border-right: 1px solid #43882C;outline: 0;height: 36px;">
<b style="margin:0px 0px 0px 18px">LOGIN</b></a></li>
<li class="" style="background-color:#EFEFEF;width:40%">
<a data-toggle="tab" style="color:black;height:36px;" id="showRegisterArea"><b style="margin:0px 0px 0px 13px">REGISTER</b></a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade active in" id="loginArea">
<div id="login-box-innerallau" style="background-color:#EFEFEF;margin-top: -6%;">
<form role="form" action="http://cube.adbee.technology/index.html">
<div class="input-group">
<input class="form-control" type="text" placeholder="Email Id" style="border:none;background-color:#EFEFEF;
border-bottom:1px;width:135%;
border: 0;
border-bottom: 1px solid #D0C8C8
outline: 0;
">
</div>
<div class="input-group">
<input type="password" class="form-control" placeholder="Password" style="background-color:#EFEFEF;width:135%;
border: 0;
border-bottom: 1px solid #D0C8C8
outline: 0;
">
</div>
<br>
<div id="remember-me-wrapper">
<div class="row">
<div class="col-xs-6">
<div class="checkbox-nice">
<input type="checkbox" id="remember-me">
<label for="remember-me" style="font-size:11px;margin:0px 0px 0px -6px !important">
Keep me logged in
</label>
</div>
</div>
<a href="forgot-password.html" id="login-forget-link" class="col-xs-6" style="font-size:12px" ;margin:-2px="" 0px="" -20px="">
Forgot Password
</a>
</div>
</div>
<br>
<div class="row">
<div class="col-xs-12">
<button type="submit" class="btn btn-success col-xs-12">Login</button>
</div>
</div>
<br>
</form>
</div>
</div>
<div class="tab-pane fade active in" id="registerArea" style="display:none">
<div id="login-box-innerallau" style="background-color:#EFEFEF;margin-top: -6%;">
<form role="form" action="http://cube.adbee.technology/index.html">
<div class="input-group">
<input class="form-control" type="text" placeholder="Email Id" style="border:none;background-color:#EFEFEF;
border-bottom:1px;width:135%;
border: 0;
border-bottom: 1px solid #D0C8C8
outline: 0;
">
</div>
<div class="input-group">
<input type="password" class="form-control" placeholder="Password" style="background-color:#EFEFEF;width:135%;
border: 0;
border-bottom: 1px solid #D0C8C8
outline: 0;
">
</div>
<div class="input-group">
<input type="password" class="form-control" placeholder="Password" style="background-color:#EFEFEF;width:135%;
border: 0;
border-bottom: 1px solid #D0C8C8
outline: 0;
">
</div>
<div id="remember-me-wrapper">
<div class="row">
<a href="forgot-password.html" id="login-forget-link" class="col-xs-6" style="font-size:12px" ;margin:-2px="" 0px="" -20px="">
Forgot Password
</a>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<button type="submit" class="btn btn-success col-xs-12">Login</button>
</div>
</div>
<br>
<div class="row">
<div class="col-xs-12 col-sm-6">
<button type="submit" class="btn btn-primary col-xs-12 btn-facebook">
<i class="fa fa-facebook"></i> facebook
</button>
</div>
<div class="col-xs-12 col-sm-6">
<button type="submit" class="btn btn-primary col-xs-12 btn-twitter">
<i class="fa fa-twitter"></i> Twitter
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Login ends -->
</ul>
</li>

Replace line 4: of custom.js
$(".dropdown").toggleClass("open");
with
$("#expandMenus").toggleClass("open");
You are toggling the whole menu on every click of the class .dropdown
Login and register have the class dropdown