Develop Reference

I cannot get the image to be responsive for a login split screen bootstrap design with image reload

I am working on a login split screen, and had it perfectly aligned with bootstrap:
It has been requested that the left side image change when the page reloads. I have found a way to do this with JavaScript, and worked it into my code, but it has made the images wonky. There is a space on the left side, an unnecessary scroll bar because the height is off as well, and the image is no longer responsive. Obviously I had to change the code to get the js to run, and the js runs perfectly, but now the layout is screwed up:
The css has stayed the same for both examples, but I feel I should share it anyways:
I have gotten so close, I just can't seem to figure out a way to fix the image. Any help would be greatly appreciated.
Here is the full code:
html:
<div class="container-fluid">
<div class="row no-gutter">
<!-- The image half -->
<div class="col-md-7 d-none d-md-flex bg-image">
<img id="myPicture" class="w-100">
</div>
<!-- The content half -->
<div class="col-md-5">
<div class="login d-flex align-items-center py-5">
<div class="container">
<div class="row">
<div class="col-lg-10 col-xl-7 mx-auto">
<h3 class="display-4">Student Login</h3>
<form action="index.html">
<div class="form-group mb-4">
<input id="inputStudentID" type="studentID" placeholder="Student ID"
required="required" autofocus=""class="form-control border-3 shadow-sm px-6">
</div>
<div class="form-group mb-4">
<input id="inputPassword" type="password" placeholder="Password"
required="required" class="form-control border-3 shadow-sm px-6">
</div>
<div class="custom-control custom-checkbox mb-4">
<input id="customCheck1" type="checkbox" checked class="custom-control-
input">
<label for="customCheck1" class="custom-control-label">Remember Me</label>
</div>
<button type="submit" style="margin-left: 1px"
class="btn btn-block text-uppercase mb-3 border-3 shadow-sm">Sign In</button>
<div class="text-center d-flex justify-content-between">
<p>Forgot Password?</p>
</div>
<div class="text-center d-flex justify-content-between">
<p>Need to <a href="https://my.ntc.edu/psp/csprod/?cmd=login">
Create Student Account?</a></p></div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
css:
.login,
.image {
min-height: 100vh;
color: #999999;
font-family: "Roboto", sans-serif;
}
.bg-image {
background-size: cover;
background-position: center center;
}
p {
color: #999999;
}
a {
color: #4285f4;
}
a:hover {
text-decoration: none;
color: #0f459b;
}
.display-4 {
font-size: 40px;
color: #999999;
}
#inputStudentID,
#inputPassword {
padding: 25px 0 25px 12px;
}
.btn {
background-color: #4285f4;
color: white;
}
.btn:hover {
background-color: #0f459b;
color: white;
}
.has-error input[type="text"],
.has-error input[type="email"],
.has-error select {
border: 1px solid #a94442;
}
js:
<script type="text/javascript">
window.onload = choosePic;
var myPix = new Array("images/girls.png", "images/group.png",
"images/studentbw.png", "images/stairs.png",
"images/purple.png", "images/portrait.png");
function choosePic() {
var randomNum = Math.floor(Math.random() * myPix.length);
document.getElementById("myPicture").src = myPix[randomNum];
}
</script>

Kindly use class="img-responsive" in image tag...
Kindly use class="img-responsive" in image tag...
<img id="myPicture" class="img-responsive" />
This change is enough for your issue....
This change is enough for your issue....

Convert div structure into single line for list view

I have a grid view (using flex box approach) and i want to change it to list view using style sheet and j query/java script. Problem: Since in grid view approach all elements are in separate div, while changing it to list view they all need to be in single line (some still need vertically aligned) and this is responsive application.
I have created style sheet class to change flex box from row to column and things look good. But now all div are not in single line. Need some help with style sheet class.
On click of a button, i will remove grid-row, grid-item and add grid-column and grid-column-item classes. But as shown in HTML, it is all div structure in grid-item class. I need to change this div as well (like product_search_img class on extreme left in a single line followed by next three div in one column (in same line) and then followed by price, add to cart button in one column.
Current Layout:
Required Layout:
.grid-row {
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
}
.grid-item {
height: 400px;
flex-basis: 25%;
-ms-flex: auto;
max-width: 230px;
position: relative;
padding: 7px;
box-sizing: border-box;
}
.grid-column {
display: flex;
flex-flow: column wrap;
justify-content: flex-start;
}
.grid-column-item {
height: 200px;
flex-basis: 25%;
-ms-flex: auto;
max-width: 920px;
position: relative;
padding: 7px;
border-bottom: 1px solid #ccc;
}
.grid-column-item:first-child {
margin-top: 7px;
border-top: 1px solid #ccc;
}
<div class="grid-row">
<div class="grid-item" data-rank="1">
<div class="product_info_panel">
<div class="font-12 text-align-left margin-left-sm margin-top-sm">
<span class="color-font-blue bold">Sponsored</span>
</div>
<a href="#" data-name="sponsored_search_result_link">
<div class="product_search_img">
<img class="img-thumbnail" src="https://cdn.images.express.co.uk/img/dynamic/67/590x/Cristiano-Ronaldo-1069886.jpg?r=1547113668491" title="i5 (6th Gen) i5-6300U Dual-core (2 Core) " width="100%">
</div>
</a>
<div class="font-10 text-align-left status-flag">
<a tabindex="0" role="button" data-placement="bottom" data-trigger="focus" class="color-font-black bold statusflag statusflag1 ProductAssociationCategoryFlagsList" data-toggle="popover" data-content="This product has accessories" id="statusflag1" data-original-title=""
title="This product has accessories">Accessories</a>
<a tabindex="1" role="button" data-placement="bottom" data-trigger="focus" class="color-font-black bold statusflag statusflag2 HideProductStatusFlag" data-toggle="popover" data-content="body" id="statusflag2" data-original-title="" title=""></a>
</div>
<a href="#" data-name="sponsored_search_result_link" data-identifier="92440Z">
<div class="p-line-3 font-14 margin-top-lg margin-bottom-sm textUpperCase color-font-blue text-align-left" title="HP Book">
i5-6300U Dual-core (2 Core)
</div>
</a>
<div class="font-12 text-align-left margin-top-md">
<div class="show">
<span class="color-font-dark-gray bold">VPN: </span><span class="color-font-dark-gray">F47UT</span>
</div>
<div class="show">
<span class="color-font-dark-gray bold">SKU: </span><span class="color-font-dark-gray">440Z</span>
</div>
</div>
<div class="font-24 font-light margin-top-sm margin-bottom-sm text-align-left">$1,345.46</div>
<div class="row" id="login-mode-cntl">
<div class="color-font-green margin-bottom-sm">In Stock</div>
</div>
<div class="row">
<div class="col-xs-3 col-sm-3 padding-vsm">
<input class="form-control text-center AddInput-default" title="Please enter the value">
</div>
<div class="col-xs-9 col-sm-9 padding-vsm">
<button type="button" class="form-control btn AddBtn-default font-12 textUpperCase bold AddBtn" title="Add To Cart">
<i class="fas fa-shopping-cart"></i>
Add
</button>
</div>
</div>
</div>
</div>
<div class="grid-item" data-rank="1">
<div class="product_info_panel">
<div class="font-12 text-align-left margin-left-sm margin-top-sm">
<span class="color-font-blue bold">Sponsored</span>
</div>
<a href="#" data-name="sponsored_search_result_link">
<div class="product_search_img">
<img class="img-thumbnail" src="https://cdn.images.express.co.uk/img/dynamic/67/590x/Cristiano-Ronaldo-1069886.jpg?r=1547113668491" title="i5 (6th Gen) i5-6300U Dual-core (2 Core) " width="100%">
</div>
</a>
<div class="font-10 text-align-left status-flag">
<a tabindex="0" role="button" data-placement="bottom" data-trigger="focus" class="color-font-black bold statusflag statusflag1 ProductAssociationCategoryFlagsList" data-toggle="popover" data-content="This product has accessories" id="statusflag1" data-original-title=""
title="This product has accessories">Accessories</a>
<a tabindex="1" role="button" data-placement="bottom" data-trigger="focus" class="color-font-black bold statusflag statusflag2 HideProductStatusFlag" data-toggle="popover" data-content="body" id="statusflag2" data-original-title="" title=""></a>
</div>
<a href="#" data-name="sponsored_search_result_link" data-identifier="92440Z">
<div class="p-line-3 font-14 margin-top-lg margin-bottom-sm textUpperCase color-font-blue text-align-left" title="HP Book">
i5-6300U Dual-core (2 Core)
</div>
</a>
<div class="font-12 text-align-left margin-top-md">
<div class="show">
<span class="color-font-dark-gray bold">VPN: </span><span class="color-font-dark-gray">F47UT</span>
</div>
<div class="show">
<span class="color-font-dark-gray bold">SKU: </span><span class="color-font-dark-gray">440Z</span>
</div>
</div>
<div class="font-24 font-light margin-top-sm margin-bottom-sm text-align-left">$1,345.46</div>
<div class="row" id="login-mode-cntl">
<div class="color-font-green margin-bottom-sm">In Stock</div>
</div>
<div class="row">
<div class="col-xs-3 col-sm-3 padding-vsm">
<input class="form-control text-center AddInput-default" title="Please enter the value">
</div>
<div class="col-xs-9 col-sm-9 padding-vsm">
<button type="button" class="form-control btn AddBtn-default font-12 textUpperCase bold AddBtn" title="Add To Cart">
<i class="fas fa-shopping-cart"></i>
Add
</button>
</div>
</div>
</div>
</div>
<div class="grid-item" data-rank="1">
<div class="product_info_panel">
<div class="font-12 text-align-left margin-left-sm margin-top-sm">
<span class="color-font-blue bold">Sponsored</span>
</div>
<a href="#" data-name="sponsored_search_result_link">
<div class="product_search_img">
<img class="img-thumbnail" src="https://cdn.images.express.co.uk/img/dynamic/67/590x/Cristiano-Ronaldo-1069886.jpg?r=1547113668491" title="i5 (6th Gen) i5-6300U Dual-core (2 Core) " width="100%">
</div>
</a>
<div class="font-10 text-align-left status-flag">
<a tabindex="0" role="button" data-placement="bottom" data-trigger="focus" class="color-font-black bold statusflag statusflag1 ProductAssociationCategoryFlagsList" data-toggle="popover" data-content="This product has accessories" id="statusflag1" data-original-title=""
title="This product has accessories">Accessories</a>
<a tabindex="1" role="button" data-placement="bottom" data-trigger="focus" class="color-font-black bold statusflag statusflag2 HideProductStatusFlag" data-toggle="popover" data-content="body" id="statusflag2" data-original-title="" title=""></a>
</div>
<a href="#" data-name="sponsored_search_result_link" data-identifier="92440Z">
<div class="p-line-3 font-14 margin-top-lg margin-bottom-sm textUpperCase color-font-blue text-align-left" title="HP Book">
i5-6300U Dual-core (2 Core)
</div>
</a>
<div class="font-12 text-align-left margin-top-md">
<div class="show">
<span class="color-font-dark-gray bold">VPN: </span><span class="color-font-dark-gray">F47UT</span>
</div>
<div class="show">
<span class="color-font-dark-gray bold">SKU: </span><span class="color-font-dark-gray">440Z</span>
</div>
</div>
<div class="font-24 font-light margin-top-sm margin-bottom-sm text-align-left">$1,345.46</div>
<div class="row" id="login-mode-cntl">
<div class="color-font-green margin-bottom-sm">In Stock</div>
</div>
<div class="row">
<div class="col-xs-3 col-sm-3 padding-vsm">
<input class="form-control text-center AddInput-default" title="Please enter the value">
</div>
<div class="col-xs-9 col-sm-9 padding-vsm">
<button type="button" class="form-control btn AddBtn-default font-12 textUpperCase bold AddBtn" title="Add To Cart">
<i class="fas fa-shopping-cart"></i>
Add
</button>
</div>
</div>
</div>
</div>
<div class="grid-item" data-rank="1">
<div class="product_info_panel">
<div class="font-12 text-align-left margin-left-sm margin-top-sm">
<span class="color-font-blue bold">Sponsored</span>
</div>
<a href="#" data-name="sponsored_search_result_link">
<div class="product_search_img">
<img class="img-thumbnail" src="https://cdn.images.express.co.uk/img/dynamic/67/590x/Cristiano-Ronaldo-1069886.jpg?r=1547113668491" title="i5 (6th Gen) i5-6300U Dual-core (2 Core) " width="100%">
</div>
</a>
<div class="font-10 text-align-left status-flag">
<a tabindex="0" role="button" data-placement="bottom" data-trigger="focus" class="color-font-black bold statusflag statusflag1 ProductAssociationCategoryFlagsList" data-toggle="popover" data-content="This product has accessories" id="statusflag1" data-original-title=""
title="This product has accessories">Accessories</a>
<a tabindex="1" role="button" data-placement="bottom" data-trigger="focus" class="color-font-black bold statusflag statusflag2 HideProductStatusFlag" data-toggle="popover" data-content="body" id="statusflag2" data-original-title="" title=""></a>
</div>
<a href="#" data-name="sponsored_search_result_link" data-identifier="92440Z">
<div class="p-line-3 font-14 margin-top-lg margin-bottom-sm textUpperCase color-font-blue text-align-left" title="HP Book">
i5-6300U Dual-core (2 Core)
</div>
</a>
<div class="font-12 text-align-left margin-top-md">
<div class="show">
<span class="color-font-dark-gray bold">VPN: </span><span class="color-font-dark-gray">F47UT</span>
</div>
<div class="show">
<span class="color-font-dark-gray bold">SKU: </span><span class="color-font-dark-gray">440Z</span>
</div>
</div>
<div class="font-24 font-light margin-top-sm margin-bottom-sm text-align-left">$1,345.46</div>
<div class="row" id="login-mode-cntl">
<div class="color-font-green margin-bottom-sm">In Stock</div>
</div>
<div class="row">
<div class="col-xs-3 col-sm-3 padding-vsm">
<input class="form-control text-center AddInput-default" title="Please enter the value">
</div>
<div class="col-xs-9 col-sm-9 padding-vsm">
<button type="button" class="form-control btn AddBtn-default font-12 textUpperCase bold AddBtn" title="Add To Cart">
<i class="fas fa-shopping-cart"></i>
Add
</button>
</div>
</div>
</div>
</div>
</div>

From your comment, I believe you're already able to get the outer block to work as required, in the example below I have edited and created 3 separate blocks and did some restructuring.
Also, check the In Stock div, it will toggle between list_view and grid_view.
There will be few additional divs you will need to create deeper inside second_block example to handle VPN and SKU in the same line for List View.
.grid-row {
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
}
.grid-item {
/* height: 400px; */
flex-basis: 25%;
-ms-flex: auto;
max-width: 230px;
position: relative;
padding: 7px;
box-sizing: border-box;
border: 2px solid red;
}
.grid-column {
display: flex;
flex-flow: column wrap;
justify-content: flex-start;
}
.grid-column-item {
height: 200px;
flex-basis: 25%;
-ms-flex: auto;
max-width: 920px;
position: relative;
padding: 7px;
border-bottom: 1px solid #ccc;
}
.grid-column-item:first-child {
margin-top: 7px;
border-top: 1px solid #ccc;
}
.outer_block {
display: flex;
flex-direction: column;
}
.list_view {
display: none;
}
#media only screen and (max-width: 800px) {
.grid-row {
flex-direction: column;
}
.grid-item {
min-width: 100%;
}
.outer_block {
flex-direction: row;
}
.img-thumbnail {
width: 100px;
}
.second_block {
flex: 1;
}
.grid_view {
display: none;
}
}
<div class="grid-row">
<div class="grid-item" data-rank="1">
<div class="product_info_panel">
<div class="font-12 text-align-left margin-left-sm margin-top-sm">
<span class="color-font-blue bold">Sponsored</span>
</div>
<div class="outer_block">
<div class="first_block">
<!-- Image -->
<a href="#" data-name="sponsored_search_result_link">
<div class="product_search_img">
<img class="img-thumbnail" src="https://cdn.images.express.co.uk/img/dynamic/67/590x/Cristiano-Ronaldo-1069886.jpg?r=1547113668491" title="i5 (6th Gen) i5-6300U Dual-core (2 Core) " width="100%" />
</div>
</a>
</div>
<div class="second_block">
<!-- Accessories Text -->
<div class="font-10 text-align-left status-flag">
<a tabindex="0" role="button" data-placement="bottom" data-trigger="focus" class="color-font-black bold statusflag statusflag1 ProductAssociationCategoryFlagsList" data-toggle="popover" data-content="This product has accessories" id="statusflag1" data-original-title=""
title="This product has accessories">Accessories</a
>
<a
tabindex="1"
role="button"
data-placement="bottom"
data-trigger="focus"
class="color-font-black bold statusflag statusflag2 HideProductStatusFlag"
data-toggle="popover"
data-content="body"
id="statusflag2"
data-original-title=""
title=""
></a>
</div>
<!-- Link to Prod Description -->
<a href="#" data-name="sponsored_search_result_link" data-identifier="92440Z">
<div class="p-line-3 font-14 margin-top-lg margin-bottom-sm textUpperCase color-font-blue text-align-left" title="HP Book">
i5-6300U Dual-core (2 Core)
</div>
</a>
<!-- VPN AND SKU -->
<div class="font-12 text-align-left margin-top-md">
<div class="show">
<span class="color-font-dark-gray bold">VPN: </span
><span class="color-font-dark-gray">F47UT</span>
</div>
<div class="show">
<span class="color-font-dark-gray bold">SKU: </span
><span class="color-font-dark-gray">440Z</span>
</div>
</div>
<!-- In Stock when in List View-->
<div id="login-mode-cntl" class="list_view">
<div class="color-font-green margin-bottom-sm">In Stock</div>
</div>
</div>
<div class="third_block">
<!-- Adding Button -->
<div class="row">
<!-- Price -->
<div class="font-24 font-light margin-top-sm margin-bottom-sm text-align-left">
$1,345.46
</div>
<!-- In Stock when in Grid View-->
<div class="row" id="login-mode-cntl" class="grid_view">
<div class="color-font-green margin-bottom-sm">In Stock</div>
</div>
<div class="col-xs-3 col-sm-3 padding-vsm">
<input class="form-control text-center AddInput-default" title="Please enter the value" />
</div>
<div class="col-xs-9 col-sm-9 padding-vsm">
<button type="button" class="form-control btn AddBtn-default font-12 textUpperCase bold AddBtn" title="Add To Cart">
<i class="fas fa-shopping-cart"></i>
Add
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

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 some divs which has the same stylesheet?

This is my code. I want to get a dynamic div content list in my 'content1' div.
For example. When this page started loading, I would do an ajax request to get some info. According the info, create some divs (the number of divs is from info array's count) which has the same stylesheet as 'accountContent' div but has different content.
<div class="main">
<br>
<div id="content1" style=" border-radius: 8px; width: 100%;margin: auto; background-color: white;-webkit-box-shadow: 3px 3px 3px;-moz-box-shadow: 3px 3px 3px;box-shadow: 3px 3px 3px; ">
<br>
<div class="accountContent">
<div style="width: 95%;margin: auto; background-color: rgb(245,245,245);height: 40px;border-radius: 10px">
<div class="col-md-4" style="padding-top: 10px;">
<p style="width:95%; margin: auto">公众号名称</p>
</div>
<div class="col-md-4" style="padding-top: 10px;">
<p style="width:95%; margin: auto">接入状态：</p>
</div>
<div class="col-md-4" style="padding-top: 5px; ">
<button type="button" class="button button-small button-plain button-borderless" data-toggle="tooltip" data-placement="left" title="删除" style="float:right;"><i class="fa fa-times" style=" color: #101010"></i></button>
</div>
</div>
<div style="width: 95%;margin: auto; background-color: white;height: 50px;border-radius: 10px">
<div class="col-md-4" style="padding-top: 10px;">
<img src="images/default.jpg" style="width: 40px;height: 40px;border-radius: 20px;float: left">
<div style="margin-left: 10px; padding-top: 10px;float: left"><p>物管助手</p></div>
</div>
<div class="col-md-4" style="padding-top: 20px;">
<p style=" margin-left: 12px;float: left">接入成功</p><i class="fa fa-check" style="padding-top: 2px; padding-left: 2px;"></i>
</div>
<div class="col-md-4" style="padding-top: 10px;">
<i class="fa fa-pencil" style="padding-top: 11px;"></i> 编辑
<i class="fa fa-wrench" style="padding-top: 11px;"></i> 功能管理
</div>
</div>
<br>
</div>
<br>
<br>
</div>
It shows as in this screenshot:

Any markup you add to your page will be styled with the CSS rules already applied to the page. In your case it sounds like you simply need to apply .accountContent to those new DIVs.
You do not have to create a stylesheet for them. If they have different styles than those already on the page, simply add the CSS selector that you've applied to those new DIVs in your current CSS file. When the Ajax adds the new DIVs to the page they will by styled according to the selectors they match.

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