替换：用onclick悬停

Question

我有一个手风琴滑块可以扩展鼠标悬停在纯粹CSS上的图像：悬停;但是，我想通过鼠标左键（或触摸屏上的触摸屏）点击图像时保持相同的效果，并保持与悬停时相同的“样式”或“状态”（扩展）。提前感谢编码新手！

<script>
		var acc = document.getElementsByClassName("null");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
	        
  });
}
	</script>

.accordion ul li div a p {
	position: absolute;
  top: 90%;
  font-size: 18px;
}

.accordion ul li:nth-child(1) { background-image: url("pic1.jpg"); }

.accordion ul li:nth-child(2) { background-image: url("pic2.jpg"); background-size: 223%;}

.accordion ul li:nth-child(2) img {width: 25%;}

.accordion ul:hover li { width: 8%; }

.active, .accordion ul:hover li:hover { width: 60%; }

.active, .accordion ul:hover li:hover a { background: rgba(0, 0, 0, 0.1); }

.active, .accordion ul:hover li:hover a * {
  opacity: 1;
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

<div class="accordion">
  <ul>
    <li>
      <div> <a class="null" href="#">
        <h2>1</h2>
        <p>#</p>
        </a> </div>
    </li>
    <li>
      <div> <a class="null" href="#">
        <h2><img src="images..." alt=""/></h2>
        <p>#</p>
        </a> </div>
    </li>
   </ul>
</div>