Skip to content

Searcharticlesvideosblogsforumsinterview questionsarticles

CSharp TV
Videos
Tech
Articles
Blogs
News
Forums
Books
Events

Article
Blog
Video
Ebook
Interview Question

Loading

Upcoming Events

23 NOV
AI Agents Conference 2026 - 3rd Edition

Latest Forum Questions

Which library is primarily used for numerical computing in Python?
tejasri15h ago4
Can I recover SQL Server database records along with the documents stored in them?
samaira1d ago3
about azure app service
jahnavi charakani2d ago1
add code snippet
Priya Prajapati2d ago3
What is RAG in Generative AI?
tejasri2d ago5

About Us Contact Us Privacy Policy Terms Brand Guidelines Partners C# Tutorials Consultants Ideas Report A Bug FAQs Sitemap Stories CSharp TV DB Talks Web3 Universe Jumpstart Blockchain

©2026 C# Corner.

All contents are copyright of their authors.

Change the All Box Color in HTML

Home
Technologies
HTML 5

Change the All Box Color in HTML

Harshad Pansuriya

10yPublished Feb 2, 2016, 8:34 AMUpdated Feb 3, 2016, 12:57 PM1.3kCode

How to change the color of All Boxes in 1 second after click all.

$(document).ready(function(){
$('.box').click( function() {
$(this).addClass("blue");
var n = $("div.box.blue").length;
// check if all boxes are in slateblue
if (n > 7)
// 1 sec after the last one clicked, make all box red
setTimeout(function() {
$("div.box.blue").css("background", "red");
}, 1000);
} );
} );

Html code:

<body>
<table>
<tr>
<td><div class="box"></div></td>
<td><div class="box"></div></td>
<td><div class="box"></div></td>
</tr>
<tr>
<td><div class="box"></div></td>
<td></td>
<td><div class="box"></div></td>
</tr>
<tr>
<td><div class="box"></div></td>
<td><div class="box"></div></td>
<td><div class="box"></div></td>
</tr>
</table>
<div class="green"></div>
</body>

Css code:

.box{
height:100px;
width:100px;
border:1px solid #000;
margin:10px;
}
.blue{
background:#6A5ACD;
}
.red{
background:#f00!important;
}
.green{
height:24px;
width:24px;
background:#0f0;
position:absolute;
top:185px;
left:185px;
}

Jquery code:

$(document).ready(function(){
$('.box').click( function() {
$(this).addClass("blue");
var n = $("div.box.blue").length;
// check if all boxes are in slateblue
if (n > 7)
// 1 sec after the last one clicked, make all box red
setTimeout(function() {
$("div.box.blue").css("background", "red");
}, 1000);
} );
} );