Question

I have a “speech bubble”. I build it using a div for the content. In that div I put an img that I used for the tail. Those 2 are hidden when the page loads. When a certain button is clicked, those 2 are supposed to be displayed. Nevertheless only the content(#msg-loc) is displayed. The img remains hidden. And I don’t get it. The strange thing is that if I remove the hidden property by default, everything is dispalyed properly. Does the display property not work with img? Hope someone can help. Thank you in advance for your replies. Cheers. Marc.

My HTML:

<div id="msg-loc" class="hidden">
    <img src="img/triangle.png" class="hidden triangle"/>
</div>

My JS:

$('#msg-loc').html('the value is incorrect').removeClass('hidden');
$('.triangle').removeClass('hidden');

My CSS:

#msg-loc{
    width:300px;
    text-align:center;
    margin-top:8px;
    background-color:pink;}

.triangle{
    left:65px;
    top:-13px;
    position:relative;}

.hidden{
    display:none;}

Answer 1

You are replacing the image with ‘the value is incorrect’.

Based on comments… updated solution:
http://jsfiddle.net/P7yhz/3/

HTML

   <div id="msg-loc" class="hidden">
    <div class="triangle"></div>
    <div class="message">The value is incorrect</div>
</div>
<a href="#">Reveal</a>

CSS

#msg-loc{
    width:300px;
    text-align:center;
    margin-top:8px;
}

.triangle {
    background:url('http://www.mathsisfun.com/geometry/images/regular-triangle-sm.gif') no-repeat bottom center;
    height: 40px;
}
.message {background:pink;}

.hidden{
    display:none;}

JS

$(document).ready(function() {
    $('a').click(function() {
        $('#msg-loc').toggleClass('hidden');
    });

});