Show div by id

by Raúl Rojas

HTML

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<div class="form-group">
  <label>Store Username <span>*</span></label>
  <input required type="text" name="storeusername" class="form-control info" id="1" />
</div>
<div class="form-group">
  <label>Store Name<span>*</span></label>
  <input required type="text" name="storename" class="form-control info" id="2" />
</div>

<div class="tt">


<div id="div1" class="infoDiv" style="display:none;">
  <div class="company-story-content">
    <h2 class="story-title">Store <span class="color-text">Username</span> </h2>
  </div>
  <p>Store username is unique and it will be used to find your store.</p>
  <p>For example www.flashcart.com/<span class="color-text">abc</span> to find store that has <span class="color-text">abc</span> username.</p>
  <p>Please keep in mind before choosing username.</p>
  <ul>
    <li>&nbsp;&nbsp;&nbsp;&nbsp;Username can contain <span class="color-text">Alphabets</span>
    <li>
    <li>&nbsp;&nbsp;&nbsp;&nbsp;Username can contain <span class="color-text">Numbers</span>.</li>
    <li>&nbsp;&nbsp;&nbsp;&nbsp;Username can contain <span class="color-text">Underscores</span>.</li>
  </ul>
</div>
</div>
<div id="div2" class="infoDiv" style="display:none;">
  <div class="company-story-content">
    <h2 class="story-title">Some other<span class="color-text">Username</span> </h2>
  </div>
  <p>Div</p>
</div>

CSS

.tt{
  background:red;
  width:200px;
  height:300px;
  position:absolute;
  right:0px;
  top:0px;
}

JavaScript

$(document).ready(function()
      {
        $(".info").click(function(event)
        {
          $(".infoDiv").hide();
          var id = $(event.target).attr('id');
          $("#div"+id).show();
        });
      });