JSFiddle - React, Tailwind, and code Playground

by velo_ninja

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Sliding Div</title>
    <style>
    </style>
    
    <script>
    	function toggle_subMenu() {
    // Create main elements
    const slideContainer = document.createElement('div');
    slideContainer.classList.add('slide-container');

    const slideContent = document.createElement('div');
    slideContent.classList.add('slide-content');

    const button = document.createElement('button');
    button.textContent = 'Toggle Slide';
    button.onclick = toggleSlide;

    // Set initial styles dynamically
    slideContainer.style.position = 'fixed';
    slideContainer.style.top = '-100%';
    slideContainer.style.left = '0';
    slideContainer.style.width = '100%';
    slideContainer.style.height = '100%';
    slideContainer.style.backgroundColor = '#333';
    slideContainer.style.color = '#fff';
    slideContainer.style.transition = 'top 0.5s ease';
    slideContent.style.padding = '20px';
		//-------------------------------------
    button.style.position = 'absolute';
    button.style.top = '10px';
    button.style.left = '10px';
    button.style.padding = '10px';
    button.style.fontSize = '16px';

    // Append elements to the body
    document.body.appendChild(slideContainer);
    slideContainer.appendChild(slideContent);
    document.body.appendChild(button);

    function toggleSlide() {
        // Toggle the 'slide-in' class
        slideContainer.classList.toggle('slide-in');

        // Toggle the styles directly
        if (slideContainer.style.top === '0%' || slideContainer.style.top === '') {
            slideContainer.style.top = '-100%';
        } else {
            slideContainer.style.top = '0%';
        }
    }
}

toggle_subMenu();
    </script>
    
</head>




<body>
 

</body>
</html>