I have developed a fitness application that includes buttons on each exercise page to display information, input data, and track progress. Currently, when these buttons are clicked, the corresponding divs overlap and are all visible at the same time.
What I am aiming for is to have only one div displayed at a time - primarily showing the information but hiding the other divs when the user interacts with the different buttons.
Below is the HTML code snippet:
<div id="buttons">
<a class="Smallbutton" id="showInfo">
<img src="img/info.png" />
</a>
<a class="Smallbutton" id="showDataInput">
<img src="img/add-item.png" />
</a>
<a class="Smallbutton" id="showHistory">
<img src="img/bar-chart.png" />
</a>
</div>
<div class="info" style="display: none;">
<p>Instructions on how to perform the exercise here.</p>
</div>
<div class="dataInput" style="display: none;">
<form onsubmit="save_data()">
Reps:
<input id="reps" type="number" name="quantity" min="1" max="12" step="1" required>Sets:
<input id="sets" type="number" name="quantity" min="1" max="4" step="1" required>
<input type="submit" value="Add Log" onclick="insert(this.form.reps.value,this.form.sets.value);show();">
</div>
<div class="history" style="display: none;">
<div id="log"></div>
<input type="button" value="Clear" onclick="clearLocal();" />
</div>
The JavaScript logic using jQuery is implemented as follows:
//JQUERY SHOW/HIDE HISTORY
$(document).ready(function() {
$('#showHistory').click(function() {
$('.history').slideToggle("fast");
});
});
//JQUERY SHOW/HIDE DATA INPUT
$(document).ready(function() {
$('#showDataInput').click(function() {
$('.dataInput').slideToggle("fast");
});
});
//JQUERY SHOW/HIDE INFO
$(document).ready(function() {
$(document).ready(function() {
$('#showInfo').click(function() {
$('.info').slideToggle("fast");
});
});
You can view the demonstration on JSFiddle here.
Any assistance towards achieving this desired functionality would be greatly appreciated.
I came across a similar example here, however, integrating the code into my application results in all divs being displayed simultaneously.