css onclick change display:none to display:block property

Question

I want to change display property of div box by click in css

html code

 <img id="modelsearchopen" src="<?php echo base_url('uploads/search.png')?>">
             <div  id="modelsearch">
                 <div class="col-md-12 ">
                 <div class="iconclose"> 
                         <span > SEARCH    </span> 
                         <span id="searchicon">&times;</span> 
                 </div>
                 </div>
                 <div class="col-md-12">
                     search form
                 </div>
            </div>

css 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;
}

when I click on img modelsearch box show

this js code works perfectly

document.getElementById("modelsearchopen").onclick = function () {

        document.getElementById('modelsearch').style.display = 'block';
    }
    document.getElementById('searchicon').onclick = function ()
    {
        document.getElementById('modelsearch').style.display = 'none';
    }

when I change into css clickable method then model not show

i have tried this css method but not show

 #modelsearchopen:focus + #modelsearch {
  display: block;
}

  #searchicon:focus + #modelsearch {
  display: none;
}

Possible duplicate of [Can I have an onclick effect in CSS?](https://stackoverflow.com/questions/13630229/can-i-have-an-onclick-effect-in-css) — TylerH, Dec 11 '17 at 19:04

score 1 · Answer 1 · answered Dec 11 '17 at 19:04

Am I right that you meant that the last css could replace the js?

If so, no it can't. Even though the :focus pseudo attribute can theoretically be applied to every element it is only reliable on input-like elements.

Also this would mean that it closes as soon as it looses focus, which can happen by clicking anywhere, pressing tab, probably pressing an arrow key, etc.. So this is not reliable.

How to do it in css

Well css is stateless, meaning you cannot add logic like that in css. Generally just use the js-code, there is literally no reason not to.

However, you could theoretically do this with html checkboxes, though that is just a giant hack.

#toggleCheckbox {
  display: none;
}

input.toggleClass[type="checkbox"]:checked + .toggleCard {
  display: none;
}

/* just for style */
.toggleCard {
  width: 200px;
  height: 100px;
  border: 1px solid black;
}

<label for="toggleCheckbox">
  <img src="https://www.placecage.com/50/50" alt="Click me">
</label>

<input type="checkbox" id="toggleCheckbox" class="toggleClass">
<div class="toggleCard">
  This is a card, you can do anything in here
<div>

It is still useful - our Drupal environment makes adding CSS but adding JavaScript is much harder, so CSS-only is a viable alternative (for us). — Mark Leighton Fisher, Oct 08 '20 at 19:38

score 0 · Accepted Answer · edited Dec 11 '17 at 19:19

By default an img element cannot be focused, but you can add the tabindex attribute to mimic that behavior. With this you will be able to click on it and your CSS will work.

Pay attention that clicking outside the image will lose "focus", so the behavior won't be the same as the click event of JS. To avoid this you may add more CSS to keep the modal visible even after losing "focus".

#modelsearchopen:focus+#modelsearch {
  display: block;
}

/* added this CSS */
#modelsearch:hover {
  display: block;
}




#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;
}

<img id="modelsearchopen" src="https://lorempixel.com/150/150/" tabindex="0">
<div id="modelsearch">
  <div class="col-md-12 ">
    <div class="iconclose">
      <span> SEARCH    </span>
      <span id="searchicon">&times;</span>
    </div>
  </div>
  <div class="col-md-12">
    search form
  </div>
</div>

how would you add more css to keep it visible? It doesn't work for me (Chrome) — SourceOverflow, Dec 11 '17 at 19:20
@noorwala did you add #modelsearch:hover { display: block; } — Temani Afif, Dec 11 '17 at 19:31

css onclick change display:none to display:block property

2 Answers2

How to do it in css