CSS Collapse boxes

Developer
Kev Rousseau
Size
2,391 Kb
Views
14,168
  1. CSS Collapse boxes Previews
  2. CSS Collapse boxes HTML Codes
  3. CSS Collapse boxes CSS Codes
  4. CSS Collapse boxes JS Codes

How do I make an css collapse boxes?

What is a css collapse boxes? How do you make a css collapse boxes? This script and codes were developed by Kev Rousseau on 15 December 2022, Thursday.

CSS Collapse boxes Previews
IQ Test

CSS Collapse boxes - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Collapse boxes</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrap active"> <button>My button</button> <div class="content">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, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
<div class="wrap"> <button>My button</button> <div class="content">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, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
<div class="wrap"> <button>My button</button> <div class="content">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, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js'></script> <script src="js/index.js"></script>
</body>
</html>

CSS Collapse boxes - Script Codes CSS Codes

.wrap { background-color: aqua; border: 1px solid; margin-bottom: 10px;
}
.wrap .content { height: 0; overflow: hidden; transition: height 0.5s ease;
}
.wrap.active .content { height: 10em; transition: height 0.5s ease;
}

CSS Collapse boxes - Script Codes JS Codes

$('button').on('click', function() { $('.wrap').removeClass('active'); $(this).parent().toggleClass('active');
});
CSS Collapse boxes - Script Codes
CSS Collapse boxes - Script Codes
Home Page Home
Developer Kev Rousseau
Username kevrousso
Uploaded December 15, 2022
Rating 3
Size 2,391 Kb
Views 14,168
Do you need developer help for CSS Collapse 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!

Kev Rousseau (kevrousso) Script Codes
Name
Invert Page
Notifications
Find needle in haystack by looping through each item one by one
Custom FuzzySearch
Square animation on scroll with instant follow, fixed banner
Menu example 2
Proxy Pattern
Menu example 1
1-Discover-Backpacker
Base Pen
Create amazing sales emails 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!