title: css onclick change display:none to display:block property
body: <p>I want to change display property of div box by click in css</p>
  
  <p>html code</p>
  
  <pre><code> &lt;img id="modelsearchopen" src="&lt;?php echo base_url('uploads/search.png')?&gt;"&gt;
               &lt;div  id="modelsearch"&gt;
                   &lt;div class="col-md-12 "&gt;
                   &lt;div class="iconclose"&gt; 
                           &lt;span &gt; SEARCH    &lt;/span&gt; 
                           &lt;span id="searchicon"&gt;&amp;times;&lt;/span&gt; 
                   &lt;/div&gt;
                   &lt;/div&gt;
                   &lt;div class="col-md-12"&gt;
                       search form
                   &lt;/div&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>css code</p>
  
  <pre><code> #modelsearch {
      display: none;
      width:370px;  
      padding: 2px;
      position:absolute;
      right:0; 
      z-index:1;
      top: 1px; 
      overflow:hidden;
      background:#2874f0;
  }
  #modelsearchopen{
      margin-top: 8px; 
      margin-left: 11px;
      cursor: pointer;
  } 
  #modelsearch .iconclose{
     font-size:12px;  
     margin-top: 8px; 
     padding: 1px 10px 5px 10px;
    border-bottom: 1px solid #fff; 
    outline: none;
  }
  #searchicon{ 
      font-size:20px; 
      float:right;
      cursor: pointer;
  }
  #modelsearch span{
      color: #fff;
  }
  </code></pre>
  
  <p>when I click on img modelsearch box show</p>
  
  <p>this js code works perfectly </p>
  
  <pre><code>document.getElementById("modelsearchopen").onclick = function () {
  
          document.getElementById('modelsearch').style.display = 'block';
      }
      document.getElementById('searchicon').onclick = function ()
      {
          document.getElementById('modelsearch').style.display = 'none';
      }
  </code></pre>
  
  <p>when I change into css clickable method then model not show</p>
  
  <p>i have tried this css method but not show</p>
  
  <pre><code> #modelsearchopen:focus + #modelsearch {
    display: block;
  }
  
    #searchicon:focus + #modelsearch {
    display: none;
  }
  </code></pre>