Content Replacement

by Wray Bowling

HTML

<div id="empty_container"></div>

<div id="secret_things">
    <a href="#">
        Secret #1
        <div class="secret">
            squirrels are from outer space!
        </div>
    </a>
    
    <a href="#">
        Secret #2
        <div class="secret">
            You can do anything at <a href="http://zombo.com">zombo com</a>!
        </div>
    </a>
</div>

CSS

#secret_things > a{
    display:inline-block;
    margin:8px;
}

#empty_container{
    position:absolute;
    width:80px;
    height:80px;
    margin-left:-40px;
    margin-top:-40px;
    top:50%;
    left:50%;
    outline: auto 4px red;
    color:orange;
}

#secret_things .secret{
    display:none;
}

JavaScript

$('#secret_things > a').click(function(event){
    console.log(this);
    var secret = $(this).children('.secret').html();
    console.log(secret);
    $('#empty_container').html( secret );
    event.preventDefault();
});