HTML expanding boxes on click - javascript

I want to create three boxes with some short text and when you click on one of those boxes, it will expand on the full width of the page and displays the whole content. Then it can be closed by clicking on some kind of icon.
I created a gif so you can see what I mean. GIF
I have so far the basic structure on jsfiddle
When you click on one box it every time opens the box-3 content insted of the content of the clicked box. Also I dont know how to close the open box.
Is the animation you can see in the gif possible with css or does it need javascriptl?
$(".row.boxes-container .box").click(function (e) {
$(".box-content-full").addClass("open");
});
.row.boxes-container{
position:relative;
}
.box:hover{
cursor:pointer;
}
.box-content{
padding:30px;
background-color:#f03939;
}
.box-content-full{
display:none;
width:0%;
transition: width 1s;
}
.box-content-full.open {
position: absolute;
max-width: 100%;
width: 100%;
z-index: 2;
display:block;
transition: width 1s;
}
.box-content-full.open .inner{
padding:30px;
margin-left:15px;
margin-right:15px;
background-color: red;
}
<div class="container">
<div class="row boxes-container">
<div class="box first">
<div class="box-content-full">
<div class="inner">
<div class="inner-header">
<span class="close">x</span>
</div>
<h3>Box 1</h3>
<p>Lorem ipsum dolem filum</p>
</div>
</div>
<div class="col-md-4">
<div class="box-content">
<h3>Box 1</h3>
</div>
</div>
</div>
<div class="box second">
<div class="box-content-full">
<div class="inner">
<div class="inner-header">
<span class="close">x</span>
</div>
<h3>Box 2</h3>
<p>Lorem ipsum dolem filum</p>
</div>
</div>
<div class="col-md-4">
<div class="box-content">
<h3>Box 2</h3>
</div>
</div>
</div>
<div class="box third">
<div class="box-content-full">
<div class="inner">
<div class="inner-header">
<span class="close">x</span>
</div>
<h3>Box 3</h3>
<p>Lorem ipsum dolem filum</p>
</div>
</div>
<div class="col-md-4">
<div class="box-content">
<h3>Box 3</h3>
</div>
</div>
</div>
</div>
</div>

I did not use your html code but tried to get a result as close as possible to your gif:
$('.box').on('click', function() {
var $element = $(this);
var $openElement = $('<div class="absoluteBox"></div>');
$openElement.css('left', $element.position().left);
$openElement.css('right', $element.width());
$element.html($openElement);
$openElement.animate({left : 0, width : $('.wrapper').width()}, 500);
});
.wrapper {
position:relative;
display:inline-block;
}
.box {
background-color:#CC0000;
width:150px;
height:200px;
display:inline-block;
margin-right:10px;
}
.box:last-of-type {
margin-right:0;
}
.absoluteBox {
position:absolute;
background-color:blue;
height:200px;
width:150px;
}
.box:hover {
background-color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="wrapper">
<div class="box"></div>
<div class="box">
</div>
<div class="box"></div>
</div>
I made the opening box blue to be better noticed. This has to be changed via css of course to red.

Updated your fiddle:
EDIT 2:
Now it should reset when you click the box.
P.S. Click the second box for the effect.
P.P.S. The effect displays incorrectly because the page contracts automatically in JSFiddle. ALTHOUGH, if you try it elsewhere and it doesn't work, consider me proven wrong!
EDIT:
Updated answer to expand element that was clicked.
https://jsfiddle.net/bszv7f90/9/
$(".row.boxes-container .box").click(function(e) {
$(this).children().each(function(i) {
if ($(this).attr('class') == 'box-content-full') {
$(this).toggleClass("exp");
}
});
$(".box-content-full").toggleClass("open");
$(".box-content").toggleClass("clicked");
});
.container {
max-width: 600px;
}
.row.boxes-container {
position: relative;
}
.box:hover {
cursor: pointer;
}
.box-content {
padding: 30px;
background-color: #f03939;
}
.box-content-full {
display: none;
width: 0%;
transition: width 1s;
}
.box-content {
padding: 30px;
background-color: #f03939;
}
.box-content.clicked {
display: none;
}
.box-content-full.open {
position: absolute;
max-width: 0%;
width: 0%;
z-index: 2;
display: none;
transition: width 1s;
}
.box-content-full.open.exp {
position: absolute;
max-width: 100%;
width: 100%;
z-index: 2;
display: block;
transition: width 1s;
}
.box-content-full.open .inner {
padding: 30px;
margin-left: 15px;
margin-right: 15px;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row boxes-container">
<div class="box first">
<div class="box-content-full">
<div class="inner">
<div class="inner-header">
<span class="close">x</span>
</div>
<h3>Box 1</h3>
<p>Lorem ipsum dolem filum</p>
</div>
</div>
<div class="col-md-4">
<div class="box-content">
<h3>Box 1</h3>
</div>
</div>
</div>
<div class="box second">
<div class="box-content-full">
<div class="inner">
<div class="inner-header">
<span class="close">x</span>
</div>
<h3>Box 2</h3>
<p>Lorem ipsum dolem filum</p>
</div>
</div>
<div class="col-md-4">
<div class="box-content">
<h3>Box 2</h3>
</div>
</div>
</div>
<div class="box third">
<div class="box-content-full">
<div class="inner">
<div class="inner-header">
<span class="close">x</span>
</div>
<h3>Box 3</h3>
<p>Lorem ipsum dolem filum</p>
</div>
</div>
<div class="col-md-4">
<div class="box-content">
<h3>Box 3</h3>
</div>
</div>
</div>
</div>
</div>
Now it should expand.
I preserved your code to make a quick copy-paste.

Related

Creating multiple pop up buttons

so I'm currently having an issue with creating multiple popups with multiple buttons. I have multiple buttons up but when I click them they all show the same pop-up. How do I assign different pop-ups to each button? I feel like I've tried everything and I can't seem to figure it out. Any help would be greatly appreciated.
function togglePopup(){
document.getElementById("popup-1").classList.toggle("active");
document.getElementById("popup-2").classList.toggle("active");
document.getElementById("popup-3").classList.toggle("active");
document.getElementById("popup-4").classList.toggle("active");
document.getElementById("popup-5").classList.toggle("active");
document.getElementById("popup-6").classList.toggle("active");
document.getElementById("popup-7").classList.toggle("active");
document.getElementById("popup-8").classList.toggle("active");
document.getElementById("popup-9").classList.toggle("active");
}
.popup .overlay {
position:fixed;
top:0px;
left:0px;
width:100vw;
height:100vh;
background:rgba(0,0,0,0.7);
z-index:1;
display:none;
}
.popup .content {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%) scale(0);
background:#fff;
width:350px;
height: 220px;
z-index:2;
text-align:center;
padding:20px;
box-sizing:border-box;
}
.popup .close-btn{
cursor:pointer;
position:absolute;
right: 20px;
top:20px;
width:30px;
height:30px;
background: #222;
color: #fff;
font-size:25px;
font-weight:600;
line-weight:30px;
text-align:center;
border-radius:50%;
}
.popup.active .overlay{
display:block;
}
.popup.active .content{
transition:all 300ms ease-in-out;
transform:translate(-50%,-50%) scale(1);
}
<div class="popup" id="popup-1">
<div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup()">×</div>
<h2> Fun Fact 1</h2>
Portuguese is the official language of 9 countries.
</div>
</div>
<div class="popup" id="popup-2">
<div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup()">×</div>
<h2> Fun Fact 2</h2>
</div>
</div>
<div class="popup" id="popup-3">
<div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup()">×</div>
<h2> Fun Fact 3</h2>
</div>
</div>
<div class="popup" id="popup-4">
<div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup()">×</div>
<h2> Fun Fact 4</h2>
</div>
</div>
<div class="popup" id="popup-5">
<div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup()">×</div>
<h2> Fun Fact 5</h2>
</div>
</div>
<div class="popup" id="popup-6">
<div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup()">×</div>
<h2> Fun Fact 6</h2>
</div>
</div>
<div class="popup" id="popup-7">
<div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup()">×</div>
<h2> Fun Fact 7</h2>
</div>
</div>
<div class="popup" id="popup-8">
<div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup()">×</div>
<h2> Fun Fact 8</h2>
</div>
</div>
<div class="popup" id="popup-9">
<div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup()">×</div>
<h2> Fun Fact 9</h2>
</div>
</div>
<div class="btn-container">
<button onclick="togglePopup()" class="btn btn1">Un</button>
<button onclick="togglePopup()" class="btn btn2">Dois</button>
<button onclick="togglePopup()" class="btn btn3">Tres</button>
<br><br>
<button onclick="togglePopup()" class="btn btn4">Quatro</button>
<button onclick="togglePopup()" class="btn btn5">Cinco</button>
<button onclick="togglePopup()" class="btn btn6">Seis</button>
<br><br>
<button onclick="togglePopup()" class="btn btn7">Sete</button>
<button onclick="togglePopup()" class="btn btn8">Oito</button>
<button onclick="togglePopup()" class="btn btn9">Nove</button>
<br><br><br><br><br>
</div>
You could pass popup numbers as params to togglePopup as :
more about template strings here
function togglePopup(num){
document.getElementById(`popup-${num}`).classList.toggle("active");
}
.popup .overlay {
position:fixed;
top:0px;
left:0px;
width:100vw;
height:100vh;
background:rgba(0,0,0,0.7);
z-index:1;
display:none;
}
.popup .content {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%) scale(0);
background:#fff;
width:350px;
height: 220px;
z-index:2;
text-align:center;
padding:20px;
box-sizing:border-box;
}
.popup .close-btn{
cursor:pointer;
position:absolute;
right: 20px;
top:20px;
width:30px;
height:30px;
background: #222;
color: #fff;
font-size:25px;
font-weight:600;
line-weight:30px;
text-align:center;
border-radius:50%;
}
.popup.active .overlay{
display:block;
}
.popup.active .content{
transition:all 300ms ease-in-out;
transform:translate(-50%,-50%) scale(1);
}
<div class="popup" id="popup-1">
<div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup('1')">×</div>
<h2> Fun Fact 1</h2>
Portuguese is the official language of 9 countries.
</div>
</div>
<div class="popup" id="popup-2">
<div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup('2')">×</div>
<h2> Fun Fact 2</h2>
</div>
</div>
<div class="popup" id="popup-3">
<div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup('3')">×</div>
<h2> Fun Fact 3</h2>
</div>
</div>
<div class="popup" id="popup-4">
<div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup('4')">×</div>
<h2> Fun Fact 4</h2>
</div>
</div>
<div class="popup" id="popup-5">
<div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup('5')">×</div>
<h2> Fun Fact 5</h2>
</div>
</div>
<div class="popup" id="popup-6">
<div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup('6')">×</div>
<h2> Fun Fact 6</h2>
</div>
</div>
<div class="popup" id="popup-7">
<div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup('7')">×</div>
<h2> Fun Fact 7</h2>
</div>
</div>
<div class="popup" id="popup-8">
<div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup('8')">×</div>
<h2> Fun Fact 8</h2>
</div>
</div>
<div class="popup" id="popup-9">
<div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup('9')">×</div>
<h2> Fun Fact 9</h2>
</div>
</div>
<div class="btn-container">
<button onclick="togglePopup('1')" class="btn btn1">Un</button>
<button onclick="togglePopup('2')" class="btn btn2">Dois</button>
<button onclick="togglePopup('3')" class="btn btn3">Tres</button>
<br><br>
<button onclick="togglePopup('4')" class="btn btn4">Quatro</button>
<button onclick="togglePopup('5')" class="btn btn5">Cinco</button>
<button onclick="togglePopup('6')" class="btn btn6">Seis</button>
<br><br>
<button onclick="togglePopup('7')" class="btn btn7">Sete</button>
<button onclick="togglePopup('8')" class="btn btn8">Oito</button>
<button onclick="togglePopup('9')" class="btn btn9">Nove</button>
<br><br><br><br><br>
</div>
A very short and effective solution -
Get all the popups, open buttons and close buttons by class names, loop through them, attach eventlisteners to each of then and you are done!
What it reduces -
No need to have a onclick for each of your open and close buttons.
No need to have special id for each popup, close buttons and open buttons.
This drastically reduces the size of your html.
One more advantage - In future, if you want to add more popups, there is no need to touch the JS, the existing code will handle it.
function togglePopup(num){
popups[num].classList.toggle("active");
}
let popups = document.getElementsByClassName("popup");
let closeBtns = document.getElementsByClassName("close-btn");
let openBtns = document.getElementsByClassName("btn");
for(let i = 0; i<closeBtns.length; i++){
closeBtns[i].addEventListener("click", function(){togglePopup(i)});
openBtns[i].addEventListener("click", function(){togglePopup(i)});
}
.popup .overlay {
position:fixed;
top:0px;
left:0px;
width:100vw;
height:100vh;
background:rgba(0,0,0,0.7);
z-index:1;
display:none;
}
.popup .content {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%) scale(0);
background:#fff;
width:350px;
height: 220px;
z-index:2;
text-align:center;
padding:20px;
box-sizing:border-box;
}
.popup .close-btn{
cursor:pointer;
position:absolute;
right: 20px;
top:20px;
width:30px;
height:30px;
background: #222;
color: #fff;
font-size:25px;
font-weight:600;
line-height:30px;
text-align:center;
border-radius:50%;
}
.popup.active .overlay{
display:block;
}
.popup.active .content{
transition:all 300ms ease-in-out;
transform:translate(-50%,-50%) scale(1);
}
<div class="popup">
<div class="overlay"></div>
<div class="content">
<div class="close-btn">×</div>
<h2> Fun Fact 1</h2>
Portuguese is the official language of 9 countries.
</div>
</div>
<div class="popup">
<div class="overlay"></div>
<div class="content">
<div class="close-btn">×</div>
<h2> Fun Fact 2</h2>
</div>
</div>
<div class="popup">
<div class="overlay"></div>
<div class="content">
<div class="close-btn">×</div>
<h2> Fun Fact 3</h2>
</div>
</div>
<div class="popup">
<div class="overlay"></div>
<div class="content">
<div class="close-btn">×</div>
<h2> Fun Fact 4</h2>
</div>
</div>
<div class="popup">
<div class="overlay"></div>
<div class="content">
<div class="close-btn">×</div>
<h2> Fun Fact 5</h2>
</div>
</div>
<div class="popup">
<div class="overlay"></div>
<div class="content">
<div class="close-btn">×</div>
<h2> Fun Fact 6</h2>
</div>
</div>
<div class="popup">
<div class="overlay"></div>
<div class="content">
<div class="close-btn">×</div>
<h2> Fun Fact 7</h2>
</div>
</div>
<div class="popup">
<div class="overlay"></div>
<div class="content">
<div class="close-btn">×</div>
<h2> Fun Fact 8</h2>
</div>
</div>
<div class="popup">
<div class="overlay"></div>
<div class="content">
<div class="close-btn">×</div>
<h2> Fun Fact 9</h2>
</div>
</div>
<div class="btn-container">
<button class="btn">Un</button>
<button class="btn">Dois</button>
<button class="btn">Tres</button>
<br><br>
<button class="btn">Quatro</button>
<button class="btn">Cinco</button>
<button class="btn">Seis</button>
<br><br>
<button class="btn">Sete</button>
<button class="btn">Oito</button>
<button class="btn">Nove</button>
<br><br><br><br><br>
</div>

Show/Hide Transition for multiple elements

I am trying to implement a show/hide function on one of my web pages. basically, there is a page on my website which shows 'Jargon' and the definitions. the user clicks on the title and the definition should then be displayed.
I have tried 2 different techniques, one works but is very harsh with no transition, it is basically open or closed:
jQuery(function($){
var acc = document.getElementsByClassName("jarg-container");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight){
panel.style.maxHeight = null;
}
else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
}
}
});
.jarg-container {
background: gainsboro;
box-shadow: 4px 5px 14px 1px black;
height: 4.5em;
width: 45% !important;
margin: 0 2.5% 2em;
}
.jarg-container h2 {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.jarg-container .jargon-desc {
height: 0;
display: none;
}
.jarg-container.active .jargon-desc{
height:100%;
display:block;
}
.jarg-container.active {
height: 100%;
}
.jarg-container h2::after {
content: '\02795';
font-size: 0.5em !important;
right: 10%;
position: absolute;
}
.jarg-container.active h2::after {
content: "\2796";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main id="content">
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<div class="col-md-12">
<div class="col-md-6 jarg-container">
<h2>Jargon</h2>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
<div class="col-md-6 jarg-container">
<h2>Jargon</h2>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
</div>
<div class="col-md-12">
<div class="col-md-6 jarg-container">
<h2>Jargon</h2>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
<div class="col-md-6 jarg-container">
<h2>Jargon</h2>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
</div>
</main>
<!-- #main -->
</div>
<!-- #primary -->
</div>
</div>
</div>
</main>
The other I like but when one opens, they all open:
$('.jargon-header').on('click', function(){
$('.jargon-desc').toggleClass('show');
});
.jargon-desc {
height: 0px;
opacity: 0;
transition: all .75s ease;
}
.jargon-desc.show {
opacity: 1;
height: 100%;
}
.jarg-container {
background: gainsboro;
box-shadow: 4px 5px 14px 1px black;
width: 45% !important;
margin: 0 2.5% 2em;
transition:all .75s ease;
}
.jarg-container h2 {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.jarg-container h2::after {
content: '\02795';
font-size: 0.5em !important;
right: 10%;
position: absolute;
}
.jarg-container.show h2::after {
content: "\2796";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main id="content">
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<div class="col-md-12">
<div class="col-md-6 jarg-container">
<div class="jargon-header" href="#">
<h2>Jargon</h2>
</div>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
<div class="col-md-6 jarg-container">
<div class="jargon-header" href="#">
<h2>Jargon</h2>
</div>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
</div>
<div class="col-md-12">
<div class="col-md-6 jarg-container">
<div class="jargon-header" href="#">
<h2>Jargon</h2>
</div>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
<div class="col-md-6 jarg-container">
<div class="jargon-header" href="#">
<h2>Jargon</h2>
</div>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
</div>
<div class="col-md-12">
<div class="col-md-6 jarg-container">
<div class="jargon-header" href="#">
<h2>Jargon</h2>
</div>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
<div class="col-md-6 jarg-container">
<div class="jargon-header" href="#">
<h2>Jargon</h2>
</div>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
</div>
</main>
<!-- #main -->
</div>
<!-- #primary -->
</div>
</div>
</div>
</main>
Ideally, I would like a combination of the 2... where all elements open individually and the use the transition effect that the second code uses...
any help combining the 2 would be amazing
To to achieve both the transition and only moving one element at a time, you can use the this keyword. When a function is called, in this case the function() inside of your click listener, it will bind this to that context. This allows you to select the element that was clicked by simply using $(this).
This may not be the most detailed explanation, so here is a bit more information on the topic.
$('.jargon-header').on('click', function() {
// Use this to select the element that was clicked
$(this)
// Then just select the next description
.next('.jargon-desc')
// And toggle the class on that description
.toggleClass('show');
});
.jargon-desc {
height: 0px;
opacity: 0;
transition: all .75s ease;
}
.jargon-desc.show {
opacity: 1;
height: 100%;
}
.jarg-container {
background: gainsboro;
box-shadow: 4px 5px 14px 1px black;
width: 45% !important;
margin: 0 2.5% 2em;
transition: all .75s ease;
}
.jarg-container h2 {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.jarg-container h2::after {
content: '\02795';
font-size: 0.5em !important;
right: 10%;
position: absolute;
}
.jarg-container.show h2::after {
content: "\2796";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main id="content">
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<div class="col-md-12">
<div class="col-md-6 jarg-container">
<div class="jargon-header" href="#">
<h2>Jargon</h2>
</div>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
<div class="col-md-6 jarg-container">
<div class="jargon-header" href="#">
<h2>Jargon</h2>
</div>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
</div>
<div class="col-md-12">
<div class="col-md-6 jarg-container">
<div class="jargon-header" href="#">
<h2>Jargon</h2>
</div>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
<div class="col-md-6 jarg-container">
<div class="jargon-header" href="#">
<h2>Jargon</h2>
</div>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
</div>
<div class="col-md-12">
<div class="col-md-6 jarg-container">
<div class="jargon-header" href="#">
<h2>Jargon</h2>
</div>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
<div class="col-md-6 jarg-container">
<div class="jargon-header" href="#">
<h2>Jargon</h2>
</div>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
</div>
</main>
<!-- #main -->
</div>
<!-- #primary -->
</div>
</div>
</div>
</main>

Adding only a single instance of a class

I'm trying to add a class to an element using jQuery. If the user clicks on an element it adds a class, which I can do, but I want only 1 instance of that class to be active so if the user clicks on something else that class is then removed from the previous element and added to the current one.
https://jsfiddle.net/gsuxjce2/3/
<div class="row">
<div class="col">
<div class="box">
</div>
</div>
<div class="col">
<div class="box">
</div>
</div>
<div class="col">
<div class="box">
</div>
</div>
<div class="col">
<div class="box">
</div>
</div>
</div>
.col {
width: 25%;
float: left;
}
.box {
width: 50px;
height: 50px;
background-color: red;
cursor: pointer;
}
.added {
background-color: blue;
}
$('.box').click(function() {
$(this).toggleClass('added');
if ( $(this).hasClass('added'); ) {
$(this).removeClass('added');
} else {
$(this).toggleClass('added');
}
});
Remove the .added class from all .box elements first, then just add it to the one clicked on with this:
$('.box').click(function() {
$('.box').removeClass('added');
$(this).addClass('added');
});
$('.box').click(function() {
$('.box').removeClass('added');
$(this).addClass('added');
});
.col {
width: 25%;
float: left;
}
.box {
width: 50px;
height: 50px;
background-color: red;
cursor: pointer;
}
.added {
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="row">
<div class="col">
<div class="box">
</div>
</div>
<div class="col">
<div class="box">
</div>
</div>
<div class="col">
<div class="box">
</div>
</div>
<div class="col">
<div class="box">
</div>
</div>
</div>
$('.added').removeClass('added');
inside your click event before everything.
Just add this to the start of you click event:
jQuery(".added").each(function(i,el){
jQuery(el).removeClass("added")
});
This removes all instances of the class, so that when you add one new, then that will be unique.

Div elements won't keep desired aspect ratio

I want to create memory game. I want to place 6 cards in 4 rows. Problem is that DIV element that is "behind" card are visible and ruin whole design (z-index3 or .back class inside my code).It's working if i put display.none back .class but problem that blocks picture of card.
Here is code that I am using
HTML
<body>
<div id="picbox">
<span id="boxbuttons">
<span class="button" id="rezz">
Rezultat
<span id="counter">0</span>
</span>
<span class="button" id="ttime">00 : 22</span>
<span class="button">
<a onclick="ResetGame();">Reset</a>
</span>
<span class="button">
<a onclick="MutedSound();">Mute sound</a>
</span>
</span>
<div id="boxcard" align="center">
<div class="flipper" id="flipper10">
<div class="front"></div>
<div class="back"><img src="http://img9.uploadhouse.com/fileuploads/17699/176992568b759acd78f7cbe98b6e4a7baa90e717.png"></div>
</div>
<div class="flipper" id="flipper11">
<div class="front"></div>
<div class="back"><img src="http://img6.uploadhouse.com/fileuploads/17699/17699262833250fa3063b708c41042005fda437d.png"></div>
</div>
<div class="flipper" id="flipper12">
<div class="front"></div>
<div class="back"><img src="http://icons.iconarchive.com/icons/martin-berube/sport/96/Volleyball-icon.png"></div>
</div>
<div class="flipper" id="flipper13">
<div class="front"></div>
<div class="back"><img src="http://img5.uploadhouse.com/fileuploads/17699/176992640c06707c66a5c0b08a2549c69745dc2c.png"></div>
</div>
<div class="flipper" id="flipper14">
<div class="front"></div>
<div class="back"><img src="http://img2.uploadhouse.com/fileuploads/17699/1769925824ea93cbb77ba9e95c1a4cec7f89b80c.png"></div>
</div>
<div class="flipper" id="flipper15">
<div class="front"></div>
<div class="back"><img src="http://img2.uploadhouse.com/fileuploads/17699/1769925824ea93cbb77ba9e95c1a4cec7f89b80c.png"></div>
</div>
<div class="flipper" id="flipper16">
<div class="front"></div>
<div class="back"><img src="http://img9.uploadhouse.com/fileuploads/17699/176992554c2ca340cc2ea8c0606ecd320824756e.png"></div>
</div>
<div class="flipper" id="flipper17">
<div class="front"></div>
<div class="back"><img src="http://img7.uploadhouse.com/fileuploads/17699/1769925708af4fb3c954b1d856da1f4d4dcd548a.png"></div>
</div>
<div class="flipper" id="flipper18">
<div class="front"></div>
<div class="back"><img src="http://img6.uploadhouse.com/fileuploads/17699/17699263b01721074bf094aa3bc695aa19c8d573.png"></div>
</div>
<div class="flipper" id="flipper19">
<div class="front"></div>
<div class="back"><img src="http://img9.uploadhouse.com/fileuploads/17699/176992615db99bb0fd652a2e6041388b2839a634.png"></div>
</div>
<div class="flipper" id="flipper110">
<div class="front"></div>
<div class="back"><img src="http://img3.uploadhouse.com/fileuploads/17699/17699259cb2d70c6882adc285ab8d519658b5dd7.png"></div>
</div>
<div class="flipper" id="flipper111">
<div class="front"></div>
<div class="back"><img src="http://img6.uploadhouse.com/fileuploads/17699/17699263b01721074bf094aa3bc695aa19c8d573.png"></div>
</div>
<div class="flipper" id="flipper20">
<div class="front"></div>
<div class="back"><img src="http://icons.iconarchive.com/icons/martin-berube/sport/96/Volleyball-icon.png"></div>
</div>
<div class="flipper" id="flipper21">
<div class="front"></div>
<div class="back"><img src="http://img9.uploadhouse.com/fileuploads/17699/176992568b759acd78f7cbe98b6e4a7baa90e717.png"></div>
</div>
<div class="flipper" id="flipper22">
<div class="front"></div>
<div class="back"><img src="http://img9.uploadhouse.com/fileuploads/17699/176992615db99bb0fd652a2e6041388b2839a634.png"></div>
</div>
<div class="flipper" id="flipper23">
<div class="front"></div>
<div class="back"><img src="http://icons.iconarchive.com/icons/reclusekc/kulo/96/Skull-1-icon.png"></div>
</div>
<div class="flipper" id="flipper24">
<div class="front"></div>
<div class="back"><img src="http://img3.uploadhouse.com/fileuploads/17699/17699259cb2d70c6882adc285ab8d519658b5dd7.png"></div>
</div>
<div class="flipper" id="flipper25">
<div class="front"></div>
<div class="back"><img src="http://img4.uploadhouse.com/fileuploads/17699/176992601ca0f28ba4a8f7b41f99ee026d7aaed8.png"></div>
</div>
<div class="flipper" id="flipper26">
<div class="front"></div>
<div class="back"><img src="http://img6.uploadhouse.com/fileuploads/17699/17699262833250fa3063b708c41042005fda437d.png"></div>
</div>
<div class="flipper" id="flipper27">
<div class="front"></div>
<div class="back"><img src="http://img7.uploadhouse.com/fileuploads/17699/1769925708af4fb3c954b1d856da1f4d4dcd548a.png"></div>
</div>
<div class="flipper" id="flipper28">
<div class="front"></div>
<div class="back"><img src="http://img4.uploadhouse.com/fileuploads/17699/176992601ca0f28ba4a8f7b41f99ee026d7aaed8.png"></div>
</div>
<div class="flipper" id="flipper29">
<div class="front"></div>
<div class="back"><img src="http://img5.uploadhouse.com/fileuploads/17699/176992640c06707c66a5c0b08a2549c69745dc2c.png"></div>
</div>
<div class="flipper" id="flipper210">
<div class="front"></div>
<div class="back"><img src="http://icons.iconarchive.com/icons/reclusekc/kulo/96/Skull-1-icon.png"></div>
</div>
<div class="flipper" id="flipper211">
<div class="front"></div>
<div class="back"><img src="http://img9.uploadhouse.com/fileuploads/17699/176992554c2ca340cc2ea8c0606ecd320824756e.png"></div>
</div>
</div>
</div>
<div id="window-resizer-tooltip"><span class="tooltipTitle">Window size: </span><span class="tooltipWidth" id="winWidth"></span> x <span class="tooltipHeight" id="winHeight"></span><br><span class="tooltipTitle">Viewport size: </span><span class="tooltipWidth" id="vpWidth"></span> x <span class="tooltipHeight" id="vpHeight"></span></div>
</body>
CSS
* {
margin: 0;
padding: 0;
}
body {
font: 18px Verdana;
color: #FFF;
background: #CCC;
}
#picbox {
margin: 0px auto;
width: auto;
}
#boxcard {
/*perspective*/
-webkit-perspective:1000;
-moz-perspective:1000;
-ms-perspective:1000;
-o-perspective:1000;
perspective:1000;
display: table;
margin: 0px auto;
width: auto;
z-index: 1;
display: table;
margin: 0px auto;
width: auto;
}
.flipped {
/*transform*/
-webkit-transform:rotateY(180deg);
-moz-transform:rotateY(180deg);
-ms-transform:rotateY(180deg);
-o-transform:rotateY(180deg);
transform:rotate(180deg);
}
.front, .back{
float: left;
width: 100px;
height: 120px;
margin: 5px;
padding: 5px;
border: 4px solid #EE872A;
cursor: pointer;
border-radius: 10px;
box-shadow: 0 1px 5px rgba(0,0,0,.5);
z-index:2;
background: #B1B1B1;
/* position:absolute;*/
/*backface-visibility*/
-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden;
-ms-backface-visibility:hidden;
-o-backface-visibility:hidden;
backface-visibility:hidden;
}
/* flip speed goes here */
.flipper {
/*transition*/
-webkit-transition:0.6s;
-moz-transition:0.6s;
-o-transition:0.6s;
transition:0.6s;
/*transform-style*/
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
-ms-transform-style:preserve-3d;
-o-transform-style:preserve-3d;
transform-style:preserve-3d;
position:relative;
display: inline-block;
position:relative;
}
/* hide back of pane during swap */
/* front pane, placed above back */
/* back, initially hidden pane */
.back{
/*transform*/
-webkit-transform:rotateY(180deg);
-moz-transform:rotateY(180deg);
-ms-transform:rotateY(180deg);
-o-transform:rotateY(180deg);
transform:rotate(180deg);
z-index:3;
}
#boxbuttons {
text-align: center;
margin: 20px;
display: block;
}
#boxbuttons .button {
text-transform: uppercase;
background: #EE872A;
padding: 5px 10px;
margin: 5px;
border-radius: 10px;
cursor: pointer;
}
#boxbuttons .button:hover {
background: #999;
}
JS
function OpenCard(){
$(this).toggleClass('flipped');
}
$(".flipper").click(OpenCard);
JSFiddle Link
It's taking the whole background of image so you better keep each image in a specific div confined to that image only.

Div doesnt have any height

I am constructing a div on the fly using Jquery, and appending it to the body or any element.
after appending, when i try to get get the height it gives 0. In Chrome i checked all its height property its 0. what could be the problem.
This is my code to append :
var template = '<div class="capMainSection">
<div class="CAP"> </div>
<div class="scrolldiv repeatSection" style="display:none;"">
<div class="header sectionheader"> </div>
<div class="content">
<div class="leftColumn">
<div class="show" id="capInfo">
<div class="label1">CA Contacts:</div>
<div class="label2"><p>CA Lead:<span class="LeadName"></span><span class="LeadEmail"></span></p></div>
<div class="lable3"><p>Lead:<span class="vLeadName"></span><span class="vLeadEmail"></span></p></div>
</div>
<div class="hidden" id="facInfo">
<div class="label1"><span class="facid"></span><span class="facName"></span></div>
<div class="label2"><span class="city"></span><span class="state"></span><span
class="country"></span></div>
</div> </div>
<div class="rightColumn">
<div class="rightGroup">
<div class="groupproto">
<p><span class="protocolname show"></span>
<span class="date_class show"></span></p>
</div>
<div class="statusClass hidden"></div>
<div class="approvedFinding show"></div>
<div class="closedFinding show"></div>
<div class="verifiedFinding show"></div>
<div class="lasActivity show"></div>
</div>
<div class="linkButton">
<input type="button" class="lplinkbutton" value=">">
</div>
</div>
</div>
</div>
</div>';
i am cloning the div first then appending
templateNode = $('.repeatSection').clone(true);
//change the display none to show
$(templateNode).find('.content').attr('id',capRow);
$('.capMainSection').append($(templateNode));
css
.content {
clear: both;
font-size: 13px;
}
.leftColumn {
float: left;
width: 40%;
padding: 10px 0 10px 10px;
}
.rightColumn {
float: right;
width: 50%;
padding: 0;
}
Try this:
.capMainSection {overflow: hidden;}
Or, you can do this:
.capMainSection:after {
content: " ";
display: block;
clear: both;
}

Categories