1

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 id=show-first is the shown and style of id="show-after" is display:none;.

Here is the code:-

<div id="container">
    <div class="flex-item" id="show-first">Enter the name
        <input type="text" id="name"></input>
        <input type="submit" name="Play" onclick="swapElement()"></input>
    </div>
    <div class="flex-item" id="show-after">After input taken show these to full container
    </div>
</div>

Javascript code is:-

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
}

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.

Brian
  • 3,850
  • 3
  • 21
  • 37
Prasook_Jain
  • 21
  • 6
  • According to your code when user clicks on input the `show-first` div will hide and other will remain visible and its working fine for me. But there is no need to use `display = 'block'` because its already visible – Gaurav Aggarwal Nov 25 '15 at 20:21
  • no @GauravAggarwal , there is little bit confusion, `show-first` (flex-item) appear and `show-after`(flex-item) is hidden first then when input is taken, `show-first` (flex-item) will hide and `show-after` (flex-item) will size in whole container – Prasook_Jain Nov 26 '15 at 17:01

1 Answers1

0

Use this JQuery code: 

$(function() {
  document.getElementById('show-after').style.display = 'none';

});
$('input[name=Play]').click(function(){
    var name = $('input[name=name]').val();
    document.getElementById('show-first').style.display = 'none';
    document.getElementById('show-after').style.display = 'block';
});

The first methode is irrelevant, if you set the display:none with CSS.

Try out here: http://jsfiddle.net/rfn4rzeL/

If you need more information just leave a comment.

Tobias Schäfer
  • 1,330
  • 2
  • 17
  • 35
  • thanks @tschaefermedia , but I want pure javascript code , without using jQuery. I made my whole site responsive, without using any framework, just HTML, CSS and JS, it will be more helpful if there is any method in js. – Prasook_Jain Nov 26 '15 at 16:53
  • Maybe one of these questions will help you [http://stackoverflow.com/questions/21070101/show-hide-div-using-javascript] [http://stackoverflow.com/questions/13836848/js-show-hide-div] – Tobias Schäfer Nov 29 '15 at 09:09