Elegant Dropdown Sections
About Our Company
We are a leading technology company dedicated to creating innovative solutions that transform businesses and improve lives. Our team of experts works tirelessly to deliver cutting-edge products and services.
Innovation
Pioneering new technologies
Quality
Excellence in everything we do
Customer Focus
Your success is our priority
Our Services
Web Development
Custom websites and web applications built with modern technologies
Mobile Applications
Native and cross-platform mobile apps for iOS and Android
Cloud Solutions
Scalable cloud infrastructure and migration services
Contact Information
Address
123 Tech Street, Silicon Valley, CA 94025
Phone
+8801316320957
devcodejourney.com@gmail.com
Business Hours
Monday - Friday
9:00 AM - 6:00 PM
Saturday
10:00 AM - 4:00 PM
Sunday
Closed
Transform your website’s user experience with our elegant animated dropdown sections! ✨ Featuring smooth transitions, gradient headers, and intuitive interactions, these components blend classical design with modern functionality. Built with HTML, Tailwind CSS, and jQuery for a responsive, user-friendly interface that works beautifully on all devices. Perfect for organizing content in an engaging, space-efficient way! #WebDesign #UIUX #FrontendDevelopment
Short & Punchy: “Classical elegance meets modern functionality! Our animated dropdown sections create a seamless user experience with smooth transitions and beautiful gradient headers. ✨ #WebDesign #UIComponents”
Feature-focused: “Enhance content organization with our animated dropdown sections! Featuring smooth animations, hover effects, and responsive design – all built with HTML, Tailwind CSS, and jQuery. Perfect for FAQs, services, and more! #FrontendDevelopment”
Benefit-focused: “Improve user engagement and reduce clutter with our elegant dropdown sections. These animated components make content exploration intuitive while maintaining a clean, professional aesthetic. #UXDesign #WebDevelopment”
Choose the caption that best fits the context where you’ll be sharing this component!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animated Dropdown Section</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
/* Custom animations for smooth transitions */
.dropdown-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.dropdown-content.active {
max-height: 500px;
}
.dropdown-arrow {
transition: transform 0.3s ease;
}
.dropdown-arrow.rotate {
transform: rotate(180deg);
}
.dropdown-item {
opacity: 0;
transform: translateY(-10px);
transition: all 0.3s ease;
}
.dropdown-item.show {
opacity: 1;
transform: translateY(0);
}
.dropdown-header {
position: relative;
overflow: hidden;
}
.dropdown-header::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
transition: left 0.5s ease;
}
.dropdown-header:hover::before {
left: 100%;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.fade-in {
animation: fadeIn 0.6s ease forwards;
}
</style>
</head>
<body>
<div class="max-w-4xl mx-auto">
<h1 class="text-3xl font-bold text-gray-800 mb-8 text-center fade-in">Elegant Dropdown Sections</h1>
<!-- Dropdown Section 1 -->
<div class="bg-white rounded-lg shadow-lg mb-4 overflow-hidden fade-in" style="animation-delay: 0.1s;">
<div class="dropdown-header bg-gradient-to-r from-blue-500 to-blue-600 text-white p-6 cursor-pointer hover:from-blue-600 hover:to-blue-700 transition-all duration-300">
<div class="flex justify-between items-center">
<h2 class="text-xl font-semibold">About Our Company</h2>
<svg class="dropdown-arrow w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</div>
</div>
<div class="dropdown-content">
<div class="p-6 bg-gray-50">
<div class="dropdown-item space-y-4">
<p class="text-gray-700 leading-relaxed">
We are a leading technology company dedicated to creating innovative solutions that transform businesses and improve lives. Our team of experts works tirelessly to deliver cutting-edge products and services.
</p>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
<div class="bg-white p-4 rounded-lg shadow hover:shadow-md transition-shadow">
<h3 class="font-semibold text-blue-600 mb-2">Innovation</h3>
<p class="text-sm text-gray-600">Pioneering new technologies</p>
</div>
<div class="bg-white p-4 rounded-lg shadow hover:shadow-md transition-shadow">
<h3 class="font-semibold text-blue-600 mb-2">Quality</h3>
<p class="text-sm text-gray-600">Excellence in everything we do</p>
</div>
<div class="bg-white p-4 rounded-lg shadow hover:shadow-md transition-shadow">
<h3 class="font-semibold text-blue-600 mb-2">Customer Focus</h3>
<p class="text-sm text-gray-600">Your success is our priority</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Dropdown Section 2 -->
<div class="bg-white rounded-lg shadow-lg mb-4 overflow-hidden fade-in" style="animation-delay: 0.2s;">
<div class="dropdown-header bg-gradient-to-r from-green-500 to-green-600 text-white p-6 cursor-pointer hover:from-green-600 hover:to-green-700 transition-all duration-300">
<div class="flex justify-between items-center">
<h2 class="text-xl font-semibold">Our Services</h2>
<svg class="dropdown-arrow w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</div>
</div>
<div class="dropdown-content">
<div class="p-6 bg-gray-50">
<div class="dropdown-item">
<div class="space-y-4">
<div class="flex items-start space-x-4 p-4 bg-white rounded-lg hover:shadow-md transition-shadow">
<div class="bg-green-100 p-3 rounded-full">
<svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</div>
<div>
<h3 class="font-semibold text-gray-800">Web Development</h3>
<p class="text-gray-600 text-sm mt-1">Custom websites and web applications built with modern technologies</p>
</div>
</div>
<div class="flex items-start space-x-4 p-4 bg-white rounded-lg hover:shadow-md transition-shadow">
<div class="bg-green-100 p-3 rounded-full">
<svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
</svg>
</div>
<div>
<h3 class="font-semibold text-gray-800">Mobile Applications</h3>
<p class="text-gray-600 text-sm mt-1">Native and cross-platform mobile apps for iOS and Android</p>
</div>
</div>
<div class="flex items-start space-x-4 p-4 bg-white rounded-lg hover:shadow-md transition-shadow">
<div class="bg-green-100 p-3 rounded-full">
<svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
</svg>
</div>
<div>
<h3 class="font-semibold text-gray-800">Cloud Solutions</h3>
<p class="text-gray-600 text-sm mt-1">Scalable cloud infrastructure and migration services</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Dropdown Section 3 -->
<div class="bg-white rounded-lg shadow-lg mb-4 overflow-hidden fade-in" style="animation-delay: 0.3s;">
<div class="dropdown-header bg-gradient-to-r from-purple-500 to-purple-600 text-white p-6 cursor-pointer hover:from-purple-600 hover:to-purple-700 transition-all duration-300">
<div class="flex justify-between items-center">
<h2 class="text-xl font-semibold">Contact Information</h2>
<svg class="dropdown-arrow w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</div>
</div>
<div class="dropdown-content">
<div class="p-6 bg-gray-50">
<div class="dropdown-item">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="space-y-4">
<div class="flex items-center space-x-3">
<div class="bg-purple-100 p-2 rounded-full">
<svg class="w-5 h-5 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
</svg>
</div>
<div>
<p class="text-sm text-gray-600">Address</p>
<p class="font-medium text-gray-800">123 Tech Street, Silicon Valley, CA 94025</p>
</div>
</div>
<div class="flex items-center space-x-3">
<div class="bg-purple-100 p-2 rounded-full">
<svg class="w-5 h-5 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
</svg>
</div>
<div>
<p class="text-sm text-gray-600">Phone</p>
<p class="font-medium text-gray-800">+8801316320957</p>
</div>
</div>
<div class="flex items-center space-x-3">
<div class="bg-purple-100 p-2 rounded-full">
<svg class="w-5 h-5 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
</svg>
</div>
<div>
<p class="text-sm text-gray-600">Email</p>
<p class="font-medium text-gray-800">devcodejourney.com@gmail.com</p>
</div>
</div>
</div>
<div class="bg-white p-4 rounded-lg shadow">
<h3 class="font-semibold text-gray-800 mb-3">Business Hours</h3>
<div class="space-y-2 text-sm">
<div class="flex justify-between">
<span class="text-gray-600">Monday - Friday</span>
<span class="font-medium">9:00 AM - 6:00 PM</span>
</div>
<div class="flex justify-between">
<span class="text-gray-600">Saturday</span>
<span class="font-medium">10:00 AM - 4:00 PM</span>
</div>
<div class="flex justify-between">
<span class="text-gray-600">Sunday</span>
<span class="font-medium text-red-500">Closed</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
// Handle dropdown toggle
$('.dropdown-header').on('click', function() {
const $header = $(this);
const $content = $header.next('.dropdown-content');
const $arrow = $header.find('.dropdown-arrow');
const $items = $content.find('.dropdown-item');
// Toggle active class
$content.toggleClass('active');
$arrow.toggleClass('rotate');
// Animate items when opening
if ($content.hasClass('active')) {
$items.each(function(index) {
const $item = $(this);
setTimeout(function() {
$item.addClass('show');
}, index * 100);
});
} else {
$items.removeClass('show');
}
// Close other dropdowns (optional - remove if you want multiple open)
$('.dropdown-content').not($content).removeClass('active');
$('.dropdown-arrow').not($arrow).removeClass('rotate');
$('.dropdown-item').not($items).removeClass('show');
});
// Add hover effect to dropdown headers
$('.dropdown-header').hover(
function() {
$(this).find('svg').css('transform', 'scale(1.1)');
},
function() {
$(this).find('svg').css('transform', 'scale(1)');
}
);
});
</script>
</body>
</html>
