Setting default content of container when page loads/refresh then changes after click event fires
Olubunmi’s Questions:
I am trying to set default content of a container when page loads/refresh, so that it does not look empty until click event that populates the container is fired.
The jQuery i’m working with looks like this
$(document).ready(function() {
$('[class^="question"]').on('click', function(e){
e.preventDefault();
var numb = this.className.replace('question', '');
$('[id^="answer"]').hide();
$('#answer' + numb).show();
});
});
My html makeup looks like this :
<div class="new_member_box">
<a href="#" class="question1"><h4>Vision</h4></a>
</div>
<div class="new_member_box_display" id="answer1">
1
</div>
<div class="new_member_box_display" id="answer">
Default
</div>
When The page loads, Default text is shown, but when I clicked Vision link, 1 is shown then Default is shown in a box below it. What i want is that Default shows when page loads/refresh, then when a link is clicked default disappears and then the value for the clicked links is shown.
Lets break down your code:
$('[id^="answer"]').hide(); //This hids all the elements starting with answer as id
$('#answer' + numb).show(); // and show a particular answer
But the default content box in your demo has question as an id
<div id="question" class="new_member_box_display">
Text will appear here when one of the tabs above is clicked
</div>
So your script will not effect this part. A valid solution would be to add a class to represent this div as a default box. Something like
<div id="question" class="new_member_box_display default">
<!-- ^ I added a class here -->
Text will appear here when one of the tabs above is clicked
</div>
Then, in our script we will hide that first.
$(function() {
$('[class^="question"]').on('click', function(e){
e.preventDefault();
var numb = this.className.replace('question', '');
$('.default').hide(); // Lets hide that first
$('[id^="answer"]').hide();
$('#answer' + numb).show();
});
});
