You can check out the snippet below.
Please note that some HTML has been removed from your example, but I have managed to fulfill the request "I want to be able to click all buttons and each button clicked should have different content as seen from the images."
In the snippet below, I used JavaScript to achieve this along with some updates on the form. Keep in mind that you can achieve this using jQuery or other methods, this is just one approach.
Here is my approach:
- I added a new attribute to the Button [for] and Form [id] to connect them. This adds clarity by indicating which button is intended for which form.
- After that, you just need to write a few lines of JavaScript.
- Create a function to switch forms.
- Use JavaScript to add a click event to the button so that when clicked, it calls the switch forms function.
- Using JavaScript, you will remove the "active" class from any div that has both the classes "app-button" and "active", and then add the class to the current caller.
- By utilizing the "for" attribute of those buttons, we can find the corresponding form to hide and show.
This code may not be fully optimized and lacks animation. You could enhance it by adding CSS transitions, toggling classes, implementing timers, or simply incorporating jQuery with the Fade function for simplicity.
(function() {
const switchForm = (element) => {
const oldActive = document.querySelector(".app-button.active");
oldActive.classList.remove("active");
document.querySelector(`#${oldActive.getAttribute("for")}`).style.display = "none";
element.classList.add("active")
document.querySelector(`#${element.getAttribute("for")}`).style.display = "";
}
document.querySelectorAll(".app-button").forEach(btn => {
btn.addEventListener("click", () => switchForm(btn));
});
})()
* {
box-sizing: border-box;
list-style: none;
text-decoration: none;
padding: 0;
margin: 0;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
display: flex;
font-size: 16px;
user-select: none;
}
/* APPLICATION */
.applicant {
width: 60%;
margin: auto;
text-align: left;
margin: 90px auto;
padding-top: 100px;
padding-bottom: 100px;
}
.login-center {
height: 100%;
flex-basis: 41%;
background: #ffffff;
padding: 35px 5px 0px 5px;
box-sizing: border-box;
box-shadow: 0 0 50px 0px #e1e1e1;
}
.text h2 {
text-align: center;
font-size: 35px;
font-weight: 600;
color: #000;
}
.links {
text-align: center;
margin-left: -20px;
margin-right: -20px;
margin: 0 auto;
padding-top: 50px;
}
.app-button {
color: #c4c4c4;
background-color: #ffffff;
border: 1px solid #000;
font-weight: bold;
font-size: 17px;
width: 200px;
margin: 0 20px;
display: inline-block;
line-height: 40px;
padding: 5px;
cursor: pointer;
}
.app-button:hover {
background: #c4c4c4;
color: #000000;
transition: 0.5s;
}
/* ACTIVE STATE */
.links .active,
.app-button:hover {
border: 1px solid #c4c4c4;
background-color: #c4c4c4;
color: #000;
}
/* FORM */
.form input::placeholder {
font-size: 14px;
color: #000;
}
.form label {
color: #000;
margin: 20px 0;
font-size: 17px;
}
.form-u {
margin: 70px 0;
padding: 0px 100px;
}
.form input {
width: 100%;
padding: 20px;
margin: 20px 0;
box-sizing: border-box;
border: none;
outline: none;
background: #ffffff;
border: 1.7px solid #e1e1e1;
}
.form input:focus {
border-color: #c4c4c4;
box-shadow: 0 0 15px 0px #e1e1e1;
}
.button-u {
color: #c4c4c4;
background-color: #000;
border: 1px solid rg#c4c4c4;
font-weight: bold;
font-size: 17px;
width: 100%;
margin: 40px 0;
display: inline-block;
line-height: 40px;
padding: 5px;
cursor: pointer;
}
/* DROPDOWN FOR LOCATION*/
.form input {
font-size: 15px;
color: #000;
}
.selector {
width: 100%;
padding-top: 20px;
margin-bottom: 25px;
position: relative;
}
#selectField p {
font-size: 15px;
}
#selectField {
width: 100%;
background: #ffffff;
box-sizing: border-box;
border: 1px solid #c4c4c4;
padding: 20px 20px;
color: #000;
font-size: 15px;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
position: relative;
}
<!--Form-->
<section class="applicant">
<div class="login-center">
<div class="text">
<h2>CREATE</h2>
</div>
<div class="links">
<button type="button" for="distribute" class="app-button active">Distribute</button>
<button type="button" for="buy" class="app-button">Buy</button>
<button type="button" for="sell" class="app-button">Sell</button>
</div>
<div class="form-u">
<form action="" class="form" id="distribute">
<label for="uname"><b>Distribute Inputs:</b></label>
<input type="text" name="name=" Enter full name "required">
<button type="submit " class="button-u ">SUBMIT DISTRIBUTE</button>
</form>
<form action="" class="form" style="display:none;" id="buy">
<label for="uname"><b>Buy Inputs:</b></label>
<input type="text" name="name=" Enter full name "required">
<button type="submit " class="button-u ">SUBMIT BUY</button>
</form>
<form action="" class="form" style="display:none;" id="sell">
<label for="uname"><b>Sell Inputs:</b></label>
<input type="text" name="name=" Enter full name "required">
<button type="submit " class="button-u ">SUBMIT SELL</button>
</form>
</div>
</div>
</section>