Hello, I'm new to programming and I'm working on creating a complaint page using Bootstrap, CSS, and JavaScript. I encountered an issue when trying to hide the content of the next page using the following CSS code:
.needs-validation fieldset:not(:first-of-type) {display: none;}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title> Communication Portal</title>
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/css/style.css" rel="stylesheet">
<style type="text/css">
.needs-validation fieldset:not(:first-of-type) {
display: none;
}
</style>
<link href="https://fonts.gstatic.com" rel="preconnect">
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600&display=swap" rel="stylesheet">
</head>
<body>
<div class="container d-flex align-items-center min-vh-100">
<div class="row g-0 justify-content-center">
<div class="col-lg-4 offset-lg-1 mx-0 px-0">
<div id="title-container">
<img class="covid-image" src="images/covid-check.png">
<p class="text-justify">Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati molestiae voluptate atque, saepe maxime dolore cumque quidem veniam accusamus nulla commodi aut corporis, totam est molestias sed ea facere. Et?</p>
</div>
</div>
...
JavaScript:
let step = document.getElementsByClassName('step');
let prevBtn = document.getElementById('prev-btn');
let nextBtn = document.getElementById('next-btn');
let submitBtn = document.getElementById('submit-btn');
let form = document.getElementsByTagName('form')[0];
let preloader = document.getElementById('preloader-wrapper');
let bodyElement = document.querySelector('body');
let successDiv = document.getElementById('success');
...
After attempting to create the page without using
.needs-validation fieldset:not(:first-of-type) {display: none;}