.pricing-container { max-width: 1200px; margin: 50px auto; display: flex; justify-content: space-between; position: relative; } .card { background: #fff; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); padding: 20px; margin: 0 10px; width: 30%; } .card h2 { color: #333; margin-top: 0; } .features { list-style: none; padding: 0; margin: 0; } .features li { margin-bottom: 10px; line-height: 1.5; color: #666; } .features .hidden { max-height: 0; overflow: hidden; transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out; opacity: 0; } #toggleFeatures { position: absolute; /* or absolute if you want it to move with page scroll */ bottom: 15%; left: 0; width: 100%; padding: 20px 0; background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0)); color: #007BFF; border: 0; border-radius: 0; /* Full width buttons typically don't have border radius */ cursor: pointer; transition: all 0.5s ease-in-out; z-index: 10; /* Ensure it's above other elements */ } @media (max-width: 768px) { .pricing-container { flex-direction: column; align-items: center; } .card { width: 80%; margin-bottom: 20px; } } .features .revealed { max-height: 100%; /* Set a max-height that your content will not exceed */ opacity: 1; } .btnRevealed{ bottom: -15%!important; } window.onload = function() { let toggleBtn = document.getElementById('toggleFeatures'); const handleHideFeatures = () => { var hiddenFeatures = document.querySelectorAll('.more-features'); console.log('hiddenFeatures ',hiddenFeatures) var button = toggleBtn; var isRevealed = button.textContent.includes('Less'); // Toggle the revealed class on each feature hiddenFeatures.forEach(function(feature) { if (isRevealed) { console.log('hide') feature.classList.remove('revealed'); feature.classList.add('hidden'); toggleBtn.classList.remove('btnRevealed'); } else { console.log('show') feature.classList.add('revealed'); feature.classList.remove('hidden'); toggleBtn.classList.add('btnRevealed'); } }); // Update the button text button.textContent = isRevealed ? 'See All Features' : 'See Less Features'; // Optionally adjust the button position, if needed } toggleBtn.addEventListener('click', handleHideFeatures); }