How to add default content to div

Question

I have a script by which content of div gets changed when a user clicks on link.

But there is an issue. By default the div container is empty. Is it possible to keep the keep Planning Content as by default on site load?

Thanks

document.getElementsByClassName( "p1" )[0].onclick = function(){
    $('.how-text').html($('.planning').html());
};

document.getElementsByClassName( "p2" )[0].onclick = function(){
    $('.how-text').html($('.results').html());
};

document.getElementsByClassName( "p3" )[0].onclick = function(){
    $('.how-text').html($('.improvements').html());
};

document.getElementsByClassName( "p4" )[0].onclick = function(){
    $('.how-text').html($('.communication').html());
};

.st { display:none; }
.how-text { min-height: 300px;
	height: auto;
	background-color: #e6ebe4; 
	padding: 20px;
	margin: 25px 0px 10px 0px;
	border-radius: 3px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-6">
		    <div class="row" style="width: 75%;margin: 0 auto;">
			 <div class="col-xs-6">
			    <a href="#" id="one" class='p1'><span id="image1"><b>Planning</b></span></a>
			 </div>
			 <div class="col-xs-6">
			    <a href="#" class="p2"><span id="image2"><b>Results</b></span></a>         
			 </div>
		   </div><br>
		   <div class="row" style="width: 75%;margin: 0 auto;">
			 <div class="col-xs-6">
			    <a href="#" class="p3"><span id="image3"><b>Improvements</b></span></a>            
			 </div>
			 <div class="col-xs-6">
			    <a href="#"  class="p4"><span id="image4"><b>Communication</b></span></a>              
			 </div>
		   </div>
<div class="st">
            <div class="planning">
            <h3>Planning</h3>			
			<p class="why-text">Search Marketing Group is a leader in creating unique Seo&nbsp;strategies that would help your website rank on page 1 of 
			Google for your most competitive keywords in your niche. We pride ourself on creating custom solutions for&nbsp;businesses and 
			making it work for them. </p>	
            </div>	
			
			<div class="results">
            <h3>Results</h3>			
			<p class="why-text">Search Marketing Group is a leader in creating unique Seo&nbsp;strategies that would help your website rank on page 1 of 
			Google for your most competitive keywords in your niche. We pride ourself on creating custom solutions for&nbsp;businesses and 
			making it work for them. </p>	
            </div>
			
			<div class="improvements">
            <h3>Improvements</h3>			
			<p class="why-text">Search Marketing Group is a leader in creating unique Seo&nbsp;strategies that would help your website rank on page 1 of 
			Google for your most competitive keywords in your niche. We pride ourself on creating custom solutions for&nbsp;businesses and 
			making it work for them. </p>	
            </div>
            
            <div class="communication">
            <h3>Communication</h3>			
			<p class="why-text">Search Marketing Group is a leader in creating unique Seo&nbsp;strategies that would help your website rank on page 1 of 
			Google for your most competitive keywords in your niche. We pride ourself on creating custom solutions for&nbsp;businesses and 
			making it work for them. </p>	
            </div>				
		  </div>
    <div class="col-sm-6 how-text">
            
    </div>

Answer 1

What i believe your asking is to load '.planning' when the page loads, without needed a click event?

there are a few ways, but since your using jquery, try this:

// A $( document ).ready() block.
$( document ).ready(function() {
    console.log( "ready!" );

    // Trigger as soon as ready
    $('.how-text').html($('.planning').html());


    // Other code (any startup code referancing DOM elements should be here unless in call-on-demain function)

    $('.p1').click(function(e){function(){
        $('.how-text').html($('.planning').html());
    });

    $( "p2" ).click(function(){
        $('.how-text').html($('.results').html());
    });

    $( "p3" ).click(function(){
        $('.how-text').html($('.improvements').html());
    });

    $( "p4" ).click(function(){
        $('.how-text').html($('.communication').html());
    });
});

I would also be looking more at jquery if I were you, for example refactoring your code to consistently use it, such as:

$('.p1').click(function(e){$('.how-text').html($('.planning').html());});

Im not sure you even need that nested $('.planning').html(), just $('.planning') might work, or even better use a jquery plugin that does all this for you and has animations/transitions and ect

http://www.jqueryrain.com/demo/jquery-lazy-load/