HTML CSS JAVA SCRIPT Free Source Code -
<!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="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
<style>
@import url('https://fonts.googleapis.com/css?family=Varela+Round');
html, body {
overflow-x: hidden;
height: 100%;
margin: 0;
padding: 0;
}
body {
background: rgba(202, 210, 211, 1);
font-family: 'Varela Round', sans-serif;
}
.main {
margin: 0 auto;
display: flex;
height: 100%;
}
.mainInner {
display: flex;
height: 92%;
width: 100%;
margin: 24px;
}
.mainInner div {
display: flex;
font-size: 12px;
text-align: left;
margin-left: 5px;
}
#sidebarMenu {
height: 92%;
position: fixed;
left: -250px;
width: 200px;
transition: left 0.3s ease-in-out;
background: rgba(48, 48, 48, 0.08);
margin: 24px 16px;
border-radius: 16px;
font-size: 12px;
}
.sidebarMenuInner {
margin: 0;
padding: 0;
}
.sidebarMenuInner li {
list-style: none;
padding: 10px;
cursor: pointer;
border-bottom: 1px solid rgba(0, 0, 0, 0.1); /* Add a bottom border */
}
.sidebarMenuInner li:hover {
background-color: rgba(0, 0, 0, 0.1); /* Change the hover background color */
}
.sidebarMenuInner li a {
color: #000000;
text-decoration: none; /* Remove underline from links */
cursor: pointer;
}
input[type="checkbox"]:checked ~ #sidebarMenu {
left: 0;
}
input[type=checkbox] {
transition: all 0.3s;
box-sizing: border-box;
display: none;
}
.sidebarIconToggle {
transition: left 0.3s ease-in-out;
box-sizing: border-box;
cursor: pointer;
position: absolute;
z-index: 99;
top: 30px;
left: 203px;
color: black;
background: transparent;
}
.toggle-icon {
font-size: 12px;
text-align: center;
color: white;
background: #000000;
padding: 7px 8px;
border-radius: 100%;
transition: left 0.3s ease-in-out;
}
.icon {
margin: 10px;
}
input[type=checkbox]:checked ~ #sidebarMenu + .main .mainInner {
margin-left: 224px;
transition: margin-left 0.3s ease-in-out;
}
input[type=checkbox]:not(:checked) ~ #sidebarMenu + .main .mainInner {
margin-left: 0;
transition: margin-left 0.3s ease-in-out;
}
input[type=checkbox]:not(:checked) ~ .sidebarIconToggle {
left: -10px;
}
.right-panel .split.right {
width: 50%;
margin: 0;
padding: 0;
}
.right-panel .content {
width: 100%;
height: 100%;
padding: 0;
}
.split-container {
position: relative;
width: 100%;
height: 100%;
}
.split {
height: 100%;
width: 50%;
position: absolute;
top: 0;
overflow-x: hidden;
transition: width 0.5s, background-color 0.5s;
z-index: 1;
}
.left {
left: 0;
background-color: rgb(105, 169, 9);
}
.right {
right: 0;
background-color: rgb(255, 217, 0);
}
.centered {
position: absolute;
text-align: center;
z-index: 2;
}
.accordion {
width: 180px;
margin: 0 auto;
font-family: Arial, sans-serif;
}
.accordion-toggle {
display: none;
}
.accordion-title {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
cursor: pointer;
user-select: none;
}
.accordion-icon {
font-size: 1.2em;
}
.accordion-content {
max-height: 0;
overflow: hidden;
text-align: left;
padding-left: 20px; /* Added indentation for sub-sections */
transition: max-height 0.6s ease-in-out;
}
.accordion-content p{
padding-left: 10px;
}
.accordion-toggle:checked + .accordion-title + .accordion-content {
max-height: 500px; /* Adjust the maximum height as needed */
}
</style>
<title>Document</title>
</head>
<body>
<input type="checkbox" class="openSidebarMenu" id="openSidebarMenu" checked>
<label for="openSidebarMenu" class="sidebarIconToggle">
<div class="toggle-icon"> <i class="bi bi-chevron-left" ></i></div>
</label>
<div id="sidebarMenu" class="left-panel">
<ul class="sidebarMenuInner">
<li><a target="_blank"><i class="bi bi-speedometer icon"></i>Dashboard</a></li>
<div class="accordion">
<input type="checkbox" class="accordion-toggle" id="section1">
<label class="accordion-title" for="section1">
Accordion Section 1
<span class="accordion-icon">+</span>
</label>
<div class="accordion-content">
<p>Sub-section 1</p>
<p>Sub-section 2</p>
<p>Sub-section 3</p>
<!-- Add more sub-sections as needed -->
</div>
<input type="checkbox" class="accordion-toggle" id="section2">
<label class="accordion-title" for="section2">
Accordion Section 2
<span class="accordion-icon">+</span>
</label>
<div class="accordion-content">
<p>Sub-section A</p>
<p>Sub-section B</p>
<p>Sub-section C</p>
<!-- Add more sub-sections as needed -->
</div>
<!-- Add more sections as needed -->
</div>
</ul>
</div>
<div class="main center right-panel">
<div class="mainInner">
<div class="content">
<div class="split-container">
<div class="split left" id="leftPane">
<div class="centered">
<button onclick="expandPane('leftPane')">Left Click</button>
</div>
</div>
<div class="split right" id="rightPane">
<div class="centered">
<button onclick="expandPane('rightPane')">Right Click</button>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
function expandPane(paneId) {
var pane = document.getElementById(paneId);
var oppositePane = paneId === 'leftPane' ? 'rightPane' : 'leftPane';
if (pane.style.width == "50%" || pane.style.width === "") {
pane.style.width = "100%";
document.getElementById(oppositePane).style.width = "0%";
} else {
pane.style.width = "50%";
document.getElementById(oppositePane).style.width = "50%";
}
}
</script>
</body>
</html>
.png)
Social Plugin