Hide/show a pop-up on clicking the corresponding user when sorted
I'm trying to hide/show a user's pop-up which opens up on clicking it's corresponding user.
This works when the users are not sorted alphabetically but do not work after sorting.
HTML:
[CODE]
<body>
<section>
<header></header>
<main></main>
</section>
</body>
</html>
[/CODE]
CSS
[CODE]
body {
padding: 0;
margin: 0;
}
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
main .wrapper {
padding-left:3px;
display: flex;
flex-wrap:wrap;
flex-direction:row;
}
.user-container {
position: relative;
padding: 5px 8px;
border: 1px solid lightgray;
float: left;
width: 33.33%;
margin-left: -1px;
margin-top: -1px;
}
.user-img {
border-radius: 50%;
margin-left: 2px;
vertical-align: middle;
margin-right: 7px;
}
.user-name{
display:inline-block;
vertical-align: middle;
}
.user-lastname, .modal-lastname {
text-transform: uppercase;
color: gray;
font-family: "Times New Roman", Courier, sans-serif;
}
.user-firstname, .modal-firstname {
text-transform: capitalize;
color: gray;
font-family: "Times New Roman", Courier, sans-serif;
}
.modal-name {
text-align: center;
padding: 10px;
display: block;
}
.sort-label {
color: gray;
font-size: 1.2em;
position: absolute;
right: 50px;
top: 30px;
}
.sortasc, .sortdes {
text-decoration: none;
height: 30px;
margin-left: 10px;
color: gray;
}
.user-modal {
position: relative;
left: 30px;
height: 20%;
width: 30%;
border: 2px solid lightgray;
border-radius: 7px;
margin-top: 0;
background: linear-gradient(180deg, white, 90%, lightgray);
box-shadow: 2px -5px 5px lightgray;
z-index: 1;
}
.modal-img {
border: 2px solid lightgray;
border-radius: 50%;
display: block;
margin: auto;
margin-top: 10px;
}
.model-label {
display: inline-block;
color: gray;
margin-left: 20%;
font-family: Calibri, "Times New Roman", sans-serif;
font-weight: bold;
text-shadow: 1px 1px lightgray;
min-width: 50px;
}
.user-info {
line-height: 1.5em;
text-align: left;
}
.user-badge {
position: absolute;
left: -80px;
top: 100px;
height: 60px;
width: 190px;
border: 1px solid lightgray;
border-radius: 3px;
background: linear-gradient(180deg, coral, 50%, orangered);
box-shadow: 2px 2px 3px lightgray;
padding: 7px 12px;
transform: rotate(90deg);
text-align: right;
}
.user-badge p {
margin: 0;
}
.badge-name {
font-weight: bold;
text-shadow: 1px 1px lightgray;
}
.badge-name-value {
color: #F2F2F2;
text-shadow: 1px 1px lightgray;
}
.close-btn {
position: absolute;
right: 25px;
top: 15px;
color: gray;
text-decoration: none;
font-weight: bold;
font-size: 1.4em;
}
.active {
background-color: #F0F0F0;
}
[/CODE]
jQuery
[CODE]
$(document).ready(function(){
$.getJSON("
https://api.randomuser.me/?results=25", function(data){
var heading = $("header").append("<h1>Contact List</h1>").css({"text-align":"center", "color":"gray", "text-shadow":"1px 1px lightgray"});
var sortlabel = $("<label class='sort-label'>sort</label>").appendTo(heading).addClass("sort-label");
var sortasc = $("<a href='#' class='sortasc' id='btn-asc'>↑</a>").appendTo(sortlabel);
var sortdes = $("<a href='#' class='sortdes' id='btn-des'>↓</a>").appendTo(sortlabel);
var dataLength = data.results.length;
var wrapper = $("<div class='wrapper'></div>").appendTo("main");
for(var i=0; i<dataLength; i++)
{
/*User data/div container */
var modalId = "mod-"+i;
user = $("<div class='user-container' data-mod-id='"+modalId+"'/>").appendTo(wrapper);
img = $("<img class='user-img' src='" + data.results[i].picture.thumbnail + "'/>").appendTo(user);
userName = $("<span />").appendTo(user).addClass('user-name');
lastName = $("<strong>" + data.results[i].name.last + ", " + "</strong>").appendTo(userName).addClass('user-lastname');
firstName = $("<strong>" + data.results[i].name.first + "</strong>").appendTo(userName).addClass('user-firstname');
/*User Modal or Pop-up starts here*/
userModal = $("<div id='"+modalId+"' class='user-modal' />").appendTo(wrapper);
closeBtn = $("<a href='#' class='close-btn'>×</a>").appendTo(userModal);
modalImg = $("<img class='modal-img' src='" + data.results[i].picture.large + "'/>").appendTo(userModal).addClass('modal-img');
userBadge = $("<div class='user-badge' />").appendTo(userModal);
badgeName = $("<p class='badge-name'>username</p><p class='badge-name-value'>" + data.results[i].login.username + "</p>").appendTo(userBadge);
modalName = $("<div/>").appendTo(userModal).addClass('modal-name');
modalLastName = $("<strong>" + data.results[i].name.last + ", " + "</strong>").appendTo(modalName).addClass('modal-lastname');
modalFirstName = $("<strong>" + data.results[i].name.first + "</strong>").appendTo(modalName).addClass('modal-firstname');
modalInfo = $("<div />").appendTo(userModal).addClass('modal-info');
email = $("<label class='model-label'><em>email</em></label> <span class='user-info'> " + data.results[i].email + "</span><br />").appendTo(modalInfo);
phone = $("<label class='model-label'><em>phone</em></label> <span class='user-info'> " + data.results[i].phone + "</span><br />").appendTo(modalInfo);
street = $("<label class='model-label'><em>street</em></label> <span class='user-info'> " + data.results[i].location.street + "</span><br />").appendTo(modalInfo);
city = $("<label class='model-label'><em>city</em></label> <span class='user-info'> " + data.results[i].location.city + "</span><br />").appendTo(modalInfo);
state = $("<label class='model-label'><em>state</em></label> <span class='user-info'> " + data.results[i].location.state + "</span><br />").appendTo(modalInfo);
zip = $("<label class='model-label'><em>zip</em></label> <span class='user-info'> " + data.results[i].location.postcode + "</span><br />").appendTo(modalInfo);
/*User Modal or Pop-up ends here*/
}
/* Sort function */
allUsers = $(".user-container");
$("#btn-des").on('click',function(){
var desc = allUsers.sort(function(a,b){
return $(a).find(".user-name").text() > $(b).find(".user-name").text();
});
$(".wrapper").html(desc);
});
$("#btn-asc").on('click',function(){
var asc = allUsers.sort(function(a,b){
return $(a).find(".user-name").text() < $(b).find(".user-name").text();
});
$(".wrapper").html(asc);
});
/* User pop-up Hide/Show */
$('.user-modal').hide(); //for hiding all modals on load
$('.close-btn').click(function(){
$(this).parent().hide();
});
$('.user-container').click(function(){
$('.user-modal').hide();
$("#"+$(this).attr("data-mod-id")).show();
});
/* User pop-up Hide/Show */
});
});
[/CODE]