title: Setting default content of container when page loads/refresh then changes after click event fires
body: <p>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.</p>
  
  <p>The jQuery i'm working with looks like this </p>
  
  <pre><code>$(document).ready(function() {
  $('[class^="question"]').on('click', function(e){
  e.preventDefault();
  var numb = this.className.replace('question', '');
  $('[id^="answer"]').hide();
  $('#answer' + numb).show();
  });
  
  });
  </code></pre>
  
  <p>My html makeup looks like this :</p>
  
  <pre><code>&lt;div class="new_member_box"&gt;
       &lt;a href="#" class="question1"&gt;&lt;h4&gt;Vision&lt;/h4&gt;&lt;/a&gt;
  &lt;/div&gt; 
  
  &lt;div class="new_member_box_display" id="answer1"&gt;
      1
  &lt;/div&gt; 
  
    &lt;div class="new_member_box_display" id="answer"&gt;
      Default
  &lt;/div&gt; 
  </code></pre>
  
  <p>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.</p>