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?

TylerH
– TylerH

2017-12-11 19:04:39 +00:00
Commented Dec 11, 2017 at 19:04 — TylerH
– TylerH, Commented Dec 11, 2017 at 19:04

SourceOverflow · Accepted Answer · 2017-12-11 19:04:06Z

1

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>

answered Dec 11, 2017 at 19:04

SourceOverflow

2,0581 gold badge10 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mark Leighton Fisher Over a year ago

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).

VXp · Accepted Answer · 2017-12-11 19:19:08Z

0

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>

edited Dec 11, 2017 at 19:19

VXp

12.1k6 gold badges34 silver badges47 bronze badges

answered Dec 11, 2017 at 18:56

Temani Afif

280k30 gold badges378 silver badges503 bronze badges

4 Comments

noorwala Over a year ago

when i click on search box its automatically close

Temani Afif Over a year ago

@noorwala in the snippet here ?

SourceOverflow Over a year ago

how would you add more css to keep it visible? It doesn't work for me (Chrome)

Temani Afif Over a year ago

@noorwala did you add #modelsearch:hover { display: block; }

Collectives™ on Stack Overflow

css onclick change display:none to display:block property

2 Answers 2

How to do it in css

1 Comment

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

How to do it in css

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related