show(), hide(), vanila Javascript



  • without jquery show() and hide() example

       var obj = document.getElementById('add_show');
    document.querySelector('#close_add').onclick = function() {
      obj.style.display = 'none';
    };
    document.querySelector('#add').onclick = function() {
      obj.style.display = 'block';
    };
    .button {
      display: inline-block;
      background: green;
      border-radius: 2px;
      color: white;
      padding: 7px 11px;
      font-size: 22px;
      cursor: pointer;
    }
    #add_show {
      position: absolute;
      top: 50px;
      left: 0;
      width: 200px;
      height: 200px;
      background: white;
      border: 1px solid black;
      display: none;
    }
    #close_add {
      font-size: 25px;
      color: #868686;
      font-weight: 400;
      position: absolute;
      top: 10px;
      left: 8px;
      transform: rotate(45deg);
    }
    <div class="button" id="add">Добавить
      <div id="add_show">
        <div id="close_add">+</div>
      </div>
    </div>



  •  var obj = document.getElementById('add_show');
    document.querySelector('#close_add').onclick = function(event) {
      event.stopPropagation();
      obj.style.display = 'none';
    };
    document.querySelector('#add').onclick = function() {
      obj.style.display = 'block';
    };
    .button {
      display: inline-block;
      background: green;
      border-radius: 2px;
      color: white;
      padding: 7px 11px;
      font-size: 22px;
      cursor: pointer;
    }
    #add_show {
      position: absolute;
      top: 50px;
      left: 0;
      width: 200px;
      height: 200px;
      background: white;
      border: 1px solid black;
      display: none;
    }
    #close_add {
      font-size: 25px;
      color: #868686;
      font-weight: 400;
      position: absolute;
      top: 10px;
      left: 8px;
      transform: rotate(45deg);
    }
    <div class="button" id="add">Добавить
      <div id="add_show">
        <div id="close_add">+</div>
      </div>
    </div>


Log in to reply
 


Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2