To start off, assign an identifier to your buttons for easier manipulation
<button id="btnSearch" type="button" class="btn btn-warning btn-lg" />
<button id="btnResult" type="button" class="btn btn-warning btn-lg" />
<button id="btnVisual" type="button" class="btn btn-warning btn-lg" />
Next, ensure that the three sections of markup on your page are enclosed within their individual div with a distinct Id for each.
<div id="search">
...
</div>
<div id="result">
...
</div>
<div id="visual">
...
</div>
In your JavaScript code, set up the initial conditions of the page and handle button clicks accordingly. When executing search and visualization functions, display or hide the relevant div(s) based on the specified conditions using JQuery's show() and hide() methods.
An example implementation could resemble the following - modify this template as needed to fit your specific use case.
function reset() {
$('#search').show();
$('#result').hide();
$('#visual').hide();
}
function init() {
var self = this;
// event listener for button clicks
$('#search').click(function () {
self.reset();
});
$('#results').click(function () {
self.search();
});
$('#visual').click(function () {
self.visualize();
});
}
function search() {
// Perform search operation and populate results table
$('#search').hide();
$('#result').show();
}
function visualize() {
// Conduct visualization task and update content
$('#result').hide();
$('#visual').show();
}
$(document).ready( function () {
this.reset();
this.init();
)};