Question

anyone know of a simple show hide? I was helped the code below that show’s div. It works fine but I need for the first link Sci Lit 1 to preload on page load. I was told I need to do a document ready. I’m not sure how to add that

    <div id="sclit"></div>

    <a href="javascript:void(0)" class="para">Sci Lit 1</a>
    <div class="details">text for sci lit 1</div> 
    <a href="javascript:void(0)" class="para">Sci Lit 2</a>
    <div class="details">text for sci lit 2</div>    
    <a href="javascript:void(0)" class="para">Sci Lit 3</a>
    <div class="details">text for sci lit 3</div>   

    $(function(){
        $(".para").click(function(){
            $("#sclit").text($(this).next(".details").text()); 
        });
    });
<style>
.details {display:none;}
</style>

Answer 1

Add this line:

$(".details:first").clone().appendTo("#sclit").show();

Demo: http://jsfiddle.net/wesley_murch/m4dhv/

There are other ways to do it, but this should do.