I an trying to make an website where we upload a song and then we get some particular results and then we can download it so i have made two buttons one for upload and one for download...so before uploading i want to hide the download button...is there some way i can do this other than collapse? please let me know the same ..till then i am using the bootstrap collapse.Its hiding the elemnts but the toggling is not happening.i have added jQuery script and also used data-target and data-bs-target...nothing works..is there a need to import something idk why its not working Please help me out...
here's the code and the website screenshot its here
<div className="upload">
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<h2>Upload a song</h2>
<br></br>
<label class="btn btn-light" for="my-file-selector">
<input id="my-file-selector" type="file" accept='audio/*'
onchange="$('#upload-file-info').text(this.files[0].name)" />
</label>
<br></br>
<span class='label label-info' id="upload-file-info"></span><br></br>
<button type="button" class="btn btn-outline-light btn-lg btn-block" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Upload</button>
<br></br>
<br></br>
<br></br>
<div className="download">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<br></br>
<br></br>
<br></br>
<div class="collapse multi-collapse" id="multiCollapseExample1">
<h2 >Download chordsheet </h2>
<br></br>
<div class="collapse multi-collapse" id="multiCollapseExample2" >
<button class="btn btn-outline-primary fa fa-download fa-lg collapse"> Download</button>
</div>
</div>
</div>
</div>