Hidden text in jQuery animation() doesn't show up

Question

HTML:

<div>
    <code id="code">about</code>
    <code id="hid-code"></code>   
</div>

CSS:

body {
    background-color: black;
 }
div {
    background-color: transparent;
    width: 100px;
    height: 1.1em;
    text-align: left;
    border: 1px solid #91e0ee;
    margin: 3px;
    font-size: 15px;
 }
#code {
    padding: 2%;
    font-variant: small-caps;
    color: #91e0ee;
    vertical-align: top;
 }
#hid-code {
    font-variant: small-caps;
    color: #91e0ee;
    display: none;
 }

JS:

// STRING TO HIDE
var hidCode = ": who is index?";

// APPEND hidCode TO #hid-code
document.getElementById('hid-code').innerHTML = hidCode;

// jQuery ANIMATION
$("div").click(function() {
    // STYLE ANIMATION
    $("div")
        .animate({ width: "20%", fontSize: "18px" }, "slow" )
        .animate({ borderLeftWidth: "5px", }, 500 );
    // HIDDEN STRING SHOWS UP
    $("hid-code").appendTo('#code').show("slow");
})

The string added to the variable hidCode should show up after the // STYLE ANIMATION . I used the display: none to hide the string in the hid-code id. Therefore, if I append() it to the code id, and use show() , it should work, but nothing happens. Any tip?

Answer 1

You need to put # in $("hid-code") , because you have defined it as an id. So, it has to be: $("#hid-code") for jQuery to find it.