I have created an image preview div to show the selected image's thumbnail. Everything was working fine so far. But now, I want this div to be hidden when the page initially loads and only become visible when a user selects an image to upload. Here is how I have set it up:
<div class="fileinput fileinput-new" data-provides="fileinput">
<div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px; display:none"></div> #This is the div for previewing images
<div>
<span class="btn btn-info btn-file">
<span class="fileinput-new">Select image</span>
<span class="fileinput-exists">Change</span>
<input type="file" name=""></span>
Here is my jquery code (I am new to jquery):
<script type="text/javascript>
$(document).ready(function(){
$(".btn btn-info btn-file").click(function(){
$(".fileinput-preview thumbnail").show();
});
});
</script>
jsFiddle http://jsfiddle.net/3717h5mg/1/
Unfortunately, this setup is not functioning as expected.