title: How to make a flex-item to display none using js/css
body: <p>I have been trying to make a input block which cover the whole part of it's container. Also define the other block which cover the whole part of container when input has taken. So I need the feature that, If a container has two flex item, one can be hide at a time , and other will be displayed.Initially <code>id=show-first</code> is the shown and style of <code>id="show-after"</code> is <code>display:none;</code>.</p>
  
  <p>Here is the code:-</p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;div class="flex-item" id="show-first"&gt;Enter the name
          &lt;input type="text" id="name"&gt;&lt;/input&gt;
          &lt;input type="submit" name="Play" onclick="swapElement()"&gt;&lt;/input&gt;
      &lt;/div&gt;
      &lt;div class="flex-item" id="show-after"&gt;After input taken show these to full container
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Javascript code is:-</p>
  
  <pre><code>function swapElement(){
      var name = document.getElementById('name').value;
      document.getElementById('show-first').style.display = 'none';
      document.getElementById('show-after').style.display = 'block'; 
      //not understand what to define for flex item in display property
  }
  </code></pre>
  
  <p>My code is not working, only first element is showing , even after taking input the script of display property not working. I am interested more in methods using javascript, and have no knowledge of jQuery.</p>