In my ASP.NET project, I wanted to add a form that when the button clicks, shows the form with the transition.
I found a way of doing that in this location Project
According to the sample, it has a check box, and when the check box is clicked the form will show from the side view, and again clicked it hides.
But for my project, I have created 2 buttons and I want to show the same with the button click.
<button id="clickerBranch" onclick="branchOnClick();">Branches</button>
<button id="clickerService" onclick="serviceOnClick();">Service Prices</button>
this is the CSS style I included from the sample project
.floating-btn {
width: 80px;
height: 80px;
background: #267410;
display: flex;
align-items: center;
justify-content: center;
text-decoration: auto;
color: aliceblue;
font-size: 16px;
font-style: oblique;
position: fixed;
box-shadow: 2px 2px 5px rgba(0,0,0,0.25);
right: 20px;
bottom: 50px;
border-radius: 50%
}
.panel {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #333;
color: #000000;
overflow: auto;
padding: 1em;
}
.ServicePanel {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: aliceblue;
color: #000000;
overflow: auto;
padding: 1em;
}
[type="checkbox"]:checked ~ .panel-wrap {
transform: translateX(0%);
}
*, *:before, *:after {
box-sizing: border-box;
}
[type="checkbox"] {
font-size: 1em;
}
These is the separate panels I want to show when each buttons clicked
<div >
<div > Sample </div>
</div>
<div >
<div > Sample </div>
</div>
So I tried to do the same according to the sample, but I couldn't find a way of doing it. Can you help me to solve this? The final output I planned is, that when each button clicks panel and panel2 I want to show and hide with the transition.
This is what I have tried to test.
<script type="text/javascript">
function branchOnClick() {
alert("H");
$("ServicePanel").show();
}
</script>
CodePudding user response:
body{
margin: 0;
padding: 0;
}
.click_me {
display: block;
width: 200px;
padding: 5px;
}
.sidebar{
width: 320px;
height: 100vh;
background-color: black;
position: fixed;
z-index: 99;
top: 0;
right: 0;
transform: translateX(100%);
transition: .3s ease-out;
}
.showSideBar{
transform: translateX(0%);
}
<div style="width:100%; height:100vh; background-color:#ccc;">
<button onclick="myFunction()">Click Me</button>
</div>
<div id="myDIV" ></div>
function myFunction() {
var element = document.getElementById("myDIV");
element.classList.toggle("showSideBar");
}