Click and hold mouse vs clicking mouse once

Question

I understand the :active state to some degree, but I don't know how to transform my box1 by clicking (without holding.) Instead, to transform I need to click and hold the box for the entire duration of the transformation.

https://jsfiddle.net/kzmhtkog/4/

.wrap {
  width: 100%;
  height:400px;
  overflow:hidden;
}

#box1 {
  background-color:red;
  text-align:left;
  cursor: pointer;
  -webkit-transition: width 1s;
  transition: width 1s;
}

#box1:active {
  width: 100%;
  background-color: red;

}

.floatleft {
  float:left; 
  width: 33.33%;
  background-color: black;
  height: 400px;
}

<div class="wrap">
  <div class="floatleft" id="box1">
  </div>
</div>

So on click you want the box to go 100% width? Should it go back to normal state if you click again? — caramba, Feb 04 '17 at 21:41
There is a `:focus` solution here: http://stackoverflow.com/a/17207437/2008111 but then you can not close the box again. So you really will need to use javascript, but you don't need to use jQuery. — caramba, Feb 04 '17 at 21:53
Something along the lines of this for javascript? document.getElementById("box1").onclick = function(){/*do something*/}; — Stack, Feb 04 '17 at 22:39
You can also do it using pure css! Let me know if you would like to see that option! — Gacci, Feb 04 '17 at 22:59
Here is a plain javascript example if you have only one box: https://jsfiddle.net/kzmhtkog/5/ and here is an example if you have multiple boxes: https://jsfiddle.net/kzmhtkog/6/ @Gacci I would like to see the CSS only example! — caramba, Feb 04 '17 at 23:05

score 1 · Accepted Answer · answered Feb 04 '17 at 21:41

You would have to use jQuery or javascript.

$('#box1').click(function() {
  $(this).toggleClass('active');
});

.wrap {                         
  width: 100%;                  
  height:400px;                 
  overflow:hidden;              
}                               
                                
#box1 {                         
  background-color:red;         
  text-align:left;              
  cursor: pointer;              
  -webkit-transition: width 1s; 
  transition: width 1s;         
}                               
                                
#box1.active {                  
  width: 100%;                  
  background-color: red;        
                                
}                               
                                
.floatleft {                    
  float:left;                   
  width: 33.33%;                
  background-color: black;      
  height: 400px;                
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">                  
  <div class="floatleft" id="box1"> 
  </div>                            
</div>

Do you know what the equivalent javascript is for it? New to programming and not sure where to start. — Stack, Feb 04 '17 at 22:49
It's not nearly as "pretty". You can start by checking out native javascript events: https://developer.mozilla.org/en-US/docs/Web/Events/click — Tallboy, Feb 05 '17 at 01:46

Click and hold mouse vs clicking mouse once

1 Answers1