<section>
<div class="container">
<div class="form">
<fieldset>
<button class="button">Добавить подписку</button>
<button class="button">Убрать подписку</button>
<button class="button">Посмотреть подписку</button>
</fieldset>
</div>
</div>
</section>
</section>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
section {
min-height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: aliceblue;
}
fieldset{
margin: 0;
padding: 0;
border: none;
display: grid;
}
.container {
max-width: 400px;
width: 90%;
padding: 20px;
box-shadow: 0px 0px 20px #00000020;
border-radius: 8px;
background-color: white;
}
.button {
width: 100%;
height: 40px;
background-color: #563C68;
border: none;
font-size: 15px;
color: #fff;
cursor: pointer;
margin: 20px 0;
padding: 10px;
}
Есть форма fieldset внутри нее кнопки, при нажатии на каждую из кнопок должно открываться индивидуальная форма и появляться вместо предыдущей.
Подскажите, пожалуйста, как такое можно реализовать? Необходимо использовать чистый JS