How to change a div to another div while pressing some buttons using javascript

Question

enter code herei’m new here in stackoverflow and i’m currently learning frontend development. i want to ask some question about changing a div to another div using javascript? i’m currently doing my personal project and it involves a dashboard. but i dont know how clicking some options will change its content. any help will be appreciated! thank you.

I tried to make a div and use z-index in the css and create a button in javascript that will change its value when i press the button, however i dont think its the right way. I’m just beginner.

const navDashboard = document.querySelector(".dashboard-navigation");
const dashboardContent = document.querySelector('.dashboard-content');
const dashboardHamburgerButton = document.querySelector(".open-dashboard-navigation i");
const dashboardHamburgerPanel = document.querySelector(".open-dashboard-navigation");

function close_Dashboard_Panel(){
    navDashboard.classList.add('close-dashboard');
    dashboardContent.style.width = "100%";
    dashboardHamburgerButton.style.display = "block";
    dashboardHamburgerButton.classList.add("dashboard-hamburger");

}

function openDashboard(){
    navDashboard.classList.remove('close-dashboard');
    dashboardContent.style.width = "calc(100% - 20rem)";
    dashboardHamburgerButton.style.display = "none";
}

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.dashboard-ui{
    overflow: hidden;
    width: 100%;
    height: 100vh;
}
.dashboard-navigation{
    width: 20rem;
    height: inherit;
    float: left;
    background-color: #040D12;
    position: fixed;
    transition: ease-in-out 0.4s;
}
.close-dashboard{
    transform: translatex(-350px);
    transition: ease-in-out 0.4s;
}
.navbar-logo{
    display: flex;
    justify-content: space-between;
    padding: 20px;
}
.navbar-logo i{
    font-size: 1.5rem;
    padding: 5px;
    margin-left: 80px;
    color: white;
}
.navbar-logo h1{
    text-transform: uppercase;
    font-weight: bold;
    color: white;
    font-size: 1.5rem;
}
.dashboard-settings{
    margin-top: 3rem;
    display: block;
    padding: 20px;
    justify-content: center;
    height: 70vh;
}
.dashboard-settings ul{
    list-style: none;
}
.dashboard-settings ul li{
    padding-bottom: 20px;
    text-decoration: none;
    color: white;
    font-size: 16px;
    cursor: pointer;
}
.dashboard-settings ul li a{
    text-decoration: none;
    color: white;
    font-size: 16px;
}
.dashboard-content{
    position: relative;
    width: calc(100% - 20rem);
    height: inherit;
    float: right;
    transition: ease-in-out 0.4s; 
    background-color: #F9F5F6;
    overflow-y: scroll;
}
.open-dashboard-navigation{
    padding: 20px;
}
.open-dashboard-navigation i{
    font-size: 1.7rem;
    padding: 5px;
    display: none;
}
.dashboard-hamburger{
    font-size: 1.5rem;
    padding: 5px;
    color: #040D12;
}
.footer-details{
    text-align: center;
}
.footer-details p{
    color: white;
}

/* Change font of footer */

 <main>
        <div class="dashboard-ui">
            <div class="container dashboard-navigation">
                <nav class="dashboard-navigation-panel">
                    <div class="navbar-logo">
                        <h1>Task.io</h1>
                        <i class="fa-solid fa-arrow-left" onclick="close_Dashboard_Panel()"></i>
                    </div>
                    <!-- Need ng User Information-->

                    <div class="dashboard-settings">
                        <ul>
                            
                            <li><i class="fa-solid fa-house" style="padding-right: 10px;"></i> Home</li>
                            <li><i class="fa-solid fa-pen-nib" style="padding-right: 10px;"></i> Create Task</li>
                            <li><i class="fa-solid fa-gear" style="padding-right: 10px;"></i> Account Settings</li>
                        </ul>
                    </div>

                    <hr style="color: white;">

                    <footer>
                        <div class="footer-details">
                            <p>© Task.io 2023</p>
                        </div>
                    </footer>


                </nav>
            </div>
            <div class="dashboard-content">
                <div class="open-dashboard-navigation">
                    <i class="fa-solid fa-bars" onclick="openDashboard()"></i>
                </div>
                <div class="container task">
                    <h1>Hello</h1>
                </div>
            </div>
        </div>
    </main>

Leave a Comment Cancel reply