Programmers, I'm encountering an issue with the hide and show buttons in my code.
<!-- Create Folder button -->
<li class="nav-item">
<a href="" class="btn btn-primary btn-sm active" role="button" aria-pressed="true" onclick="document.getElementById('createFolderForm').style.display = 'block'; return false;"> <i class="far fa-folder fa-1x"></i> Create Folder</a>
<form id="createFolderForm" action="/create-folder" method="post" style="display: none; font-size: smaller;">
{{ csrf_field() }}
<BR>
<input type="hidden" name="folder" value="{{ $path }}">
<input type="text" name="name" placeholder="Folder name" required>
<input type="submit" value="Create" class="btn btn-success btn-sm">
</form>
</li>
<br><br>
<!-- Upload files button -->
<li class="nav-item">
<a href="" class="btn btn-primary btn-sm active" role="button" aria-pressed="true" onclick="document.getElementById('uploadForm').style.display = 'block'; return false;"><i class="fas fa-cloud-upload-alt"></i> Upload File</a>
<form id="uploadForm" action="/upload" method="post" style="display: none; font-size: smaller;" enctype="multipart/form-data">
{{ csrf_field() }}
<BR>
<input type="hidden" name="folder" value="{{ $path }}">
Select file to upload:<BR>
<input type="file" name="file" id="fileToUpload" required>
<BR><BR> <i class="fas fa-lock"></i>
Encrypt
<input type="checkbox" name="encrypt" value="1">
<BR><BR>
<input type="submit" value="Upload" class="btn btn-success btn-sm">
</form>
</li>
</ul>
<br><br>
I have implemented a folder creation and file upload feature within a navigation element. However, I am facing an issue where clicking on 'Create Folder' will display the form, but when I click on 'Upload File', it does not hide the 'Create Folder' information. My intention is to make them show and hide interchangeably when either one is clicked. Any assistance would be greatly appreciated.