JQuery toogle boxes

Developer
Wojciech
Size
2,477 Kb
Views
26,312
  1. JQuery toogle boxes Previews
  2. JQuery toogle boxes HTML Codes
  3. JQuery toogle boxes CSS Codes
  4. JQuery toogle boxes JS Codes

How do I make an jquery toogle boxes?

What is a jquery toogle boxes? How do you make a jquery toogle boxes? This script and codes were developed by Wojciech on 01 September 2022, Thursday.

JQuery toogle boxes Previews
IQ Test

JQuery toogle boxes - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>jQuery toogle boxes</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="widget"> <h3>Element <i class="fa fa-angle-down" aria-hidden="true"></i></h3> <div class="collapsed"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s </div>
</div>
<div class="widget"> <h3>Element <i class="fa fa-angle-down" aria-hidden="true"></i></h3> <div class="collapsed"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s </div>
</div>
<div class="widget"> <h3>Element <i class="fa fa-angle-down" aria-hidden="true"></i></h3> <div class="collapsed"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s </div>
</div>
<div class="widget"> <h3>Element <i class="fa fa-angle-down" aria-hidden="true"></i></h3> <div class="collapsed"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s </div>
</div>
<div class="widget"> <h3>Element <i class="fa fa-angle-down" aria-hidden="true"></i></h3> <div class="collapsed"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

JQuery toogle boxes - Script Codes CSS Codes

.widget:nth-child(1n) { background: #f44336;
}
.widget:nth-child(2n) { background: #3f51b5;
}
.widget:nth-child(3n) { background: #9c27b0;
}
.widget:nth-child(4n) { background: #ff9800;
}
.widget:nth-child(5n) { background: #ff5722;
}
.widget { width: 200px; padding: 10px;
}
.widget h3 { margin: 0; position: relative; cursor: pointer;
}
.widget h3 i { position: absolute; right: 0; transition: all .3s ease-in-out;
}
.widget h3.active i { transform: scaleY(-1);
}
.widget .collapsed { display: none; margin-top: 10px;
}

JQuery toogle boxes - Script Codes JS Codes

$('.widget h3').each(function(){ $(this).click(function(){ $('.widget h3').not(this).removeClass('active').next().slideUp(); $(this).toggleClass('active').next().slideToggle(); });
});
JQuery toogle boxes - Script Codes
JQuery toogle boxes - Script Codes
Home Page Home
Developer Wojciech
Username wojtek1150
Uploaded September 01, 2022
Rating 3
Size 2,477 Kb
Views 26,312
Do you need developer help for JQuery toogle boxes?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Wojciech (wojtek1150) Script Codes
Name
Angular advanced table filter
Get third wednesday
Social media hovers
Simple eye follower
CSS only Transparent tooltip
Google maps SVG
Make Your Own Fingal sign
React Chat App
Falling snow
Swiper tests
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!