I want to hide my content. This page would contain a form and a button to process a picture. After I enter a value in the form and press the button my scripts would process the picture and automatically page will load. The result should be put in a DIV but this won't be visible after pressing the button and page load. The content is to be shown only after page processing and pressing the button. How can achieve this by using jQuery.?
my html
<button type="submit" class="btn btn-warning" id="submitBtn" >Submit</button>
<div id="toggle-show" class="container">
<div class="row"><img class="result-single" src="{% static "/assets/fig/figure1.png" %}">
</div>
</div>
my scripts
$(document).ready(function() {
$('#toggle-show').hide();
$("#submitBtn").click(function(){
$("#toggle-show").show(); #show the pic
})
});
You can use sessionStorage to do this.
For more information regarding sessionStorage: click here
$(document).ready(function () {
$('#toggle-show').hide();
$("#submitBtn").click(function () {
sessionStorage.setItem("pic_visible", "true");
});
if (sessionStorage.getItem("pic_visible") == "true") {
$("#toggle-show").show();
// sessionStorage.setItem("pic_visible", "false");
}
});
You can also use sessionStorage.setItem("pic_visible", "false") inside the if statement to toggle the visibility to false when reloading the page the 2nd time!
JS fiddle (for a working example): click here
Also look into : localStorage