Am having the following code..
<img src="" id="image1" > <img src="www" id="image1" > <img src="" id="image2" > <img src="www" id="image2" > <div id="imagesrc"></div> How can I hide a div with an id (#imagesrc) when #image1 have src="", and show my div (#imagesrc) when #image1 have src !=""?
CSS is clean, is JavaScript-free, and responds to changes automatically.
Of course, it assumes that your markup really looks like that.
#image1[src=""] ~ #imagesrc { display: none; } try
$(document).ready(function () { if ($("#image1").attr("src") == "") { $("#imagesrc").hide(); } else { $("#imagesrc").show(); } }); Update
$("#image1").change(function () { var imgControlName = "#imagesrc"; readURL(this, imgControlName); if (jQuery("#preview").attr("src") == "") { jQuery("#remove").hide(); } else { jQuery("#remove").show(); } }); 
try this
$(function(){ //ready function $('#imagesrc').show(); //show the imagesrc div.you can avoid this, if imagesrc div is already shown if($('#image1').attr('src')==""){ //check for condition $('#imagesrc').hide(); //if true hide it } }); Try this full code
you can use attr to call any html element attribute value or to set attribute value
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> </head> <body> <img src="" id="image1" > <img src="www" id="image1" > <img src="" id="image2" > <img src="www" id="image2" > <div id="imagesrc"></div> <script> $( document ).ready(function() { if ($("#image1").attr("src") == "") { $("#imagesrc").hide(); } else { $("#imagesrc").show(); } }); </script> </body> </html> 
Try any one of the below approach.
if($("#image1").attr('src') != ''){ $('#imagesrc').hide(); }else{ $('#imagesrc').show(); } or
$('#imagesrc').toggle($("#image1").attr('src') != ''); 
//include jquery.js
<script type="text/javascript"> $(document).ready(function(){ if($('#image1').attr('src')==""){ $('#imagesrc').hide(); //you can also give $('#imagesrc').css('display','none'); } }); </script> Also please do not place same "id" to more than 1 element. Instead, use a class.
I hope you get an idea...
#imagesrccannot be shown and hidden at the same time. Or are these just examples, and there is only one element with the same ID and you just duplicated it to demonstrate that the element can have different values forsrc?$('#imagesrc').toggle($('#image1[src!='']').length > 0).