How to add default content to div
I have a script whereby the content of a div changes when the user clicks on a link.
But there is a problem. The div container is empty by default. Is it possible to keep scheduling content as default when the site loads?
thank
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 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 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 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 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 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 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 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 businesses and
making it work for them. </p>
</div>
</div>
<div class="col-sm-6 how-text">
</div>
+3
source to share
3 answers
What I think your request is to load ".planning" on page load without the need for a click event?
there are several ways, but since you are 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 look more at jquery if I were you, for example refactoring your code to use it consistently, like this:
$('.p1').click(function(e){$('.how-text').html($('.planning').html());});
I'm not sure if you even need a nested $ ('. Planning'). html () can only work $ ('. planning') or even better use a jquery plugin that does it all for you and has animations / transitions and ect
+2
source to share
In your question, this can be done in a variety of ways.
just try this !!
$('.how-text').html($('.planning').html());
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());
};
Update: after your commentNot Working on Site.. could be some issue
You called jQuery library
twice, just delete it! I just found from divinepower.co.in/smg
+1
source to share
solvable .....
function codeAddress() {
$('.how-text').html($('.planning').html());
}
window.onload = codeAddress;
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());
};
0
source to share