title: Keep DIV active after click on an accordion images
body: <p>I would like to replace the :hover to :active for an accordion visible in this codepen : <a href="https://codepen.io/ferry/pen/ZYVwxz" rel="nofollow noreferrer">https://codepen.io/ferry/pen/ZYVwxz</a></p>
  
  <p>The code of the page is : </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@import url(https://fonts.googleapis.com/css?family=Open+Sans);
  @import url(https://fonts.googleapis.com/css?family=Montserrat:700);
  h1 {
    text-align: center;
    font-family: Montserrat,sans-serif;
    color: #333;
  }
  
  .accordion {
    width: 100%;
    max-width: 1080px;
    height: 250px;
    overflow: hidden;
    margin: 50px auto;
  }
  .accordion ul {
    width: 100%;
    display: table;
    table-layout: fixed;
    margin: 0;
    padding: 0;
  }
  .accordion ul li {
    display: table-cell;
    vertical-align: bottom;
    position: relative;
    width: 16.666%;
    height: 250px;
    background-repeat: no-repeat;
    background-position: center center;
    transition: all 500ms ease;
  }
  .accordion ul li div {
    display: block;
    overflow: hidden;
    width: 100%;
  }
  .accordion ul li div span {
    display: block;
    width: 100%;
    height: 250px;
    overflow: hidden;
    position: absolute;
  }
  .accordion ul li div a {
    display: block;
    height: 250px;
    width: 100%;
    position: relative;
    z-index: 3;
    vertical-align: bottom;
    padding: 15px 20px;
    box-sizing: border-box;
    color: #fff;
    text-decoration: none;
    font-family: Open Sans, sans-serif;
    transition: all 200ms ease;
  }
  .accordion ul li div a * {
    opacity: 0;
    margin: 0;
    width: 100%;
    text-overflow: ellipsis;
    position: relative;
    z-index: 5;
    white-space: nowrap;
    overflow: hidden;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
    -webkit-transition: all 400ms ease;
    transition: all 400ms ease;
  }
  .accordion ul li div a h2 {
    font-family: Montserrat,sans-serif;
    text-overflow: clip;
    font-size: 24px;
    text-transform: uppercase;
    margin-bottom: 2px;
    top: 160px;
  }
  .accordion ul li div a p {
    top: 160px;
    font-size: 13.5px;
  }
  .accordion ul:active li {
    width: 8%;
  }
  .accordion ul:active li:active {
    width: 60%;
  }
  .accordion ul:active li:active a {
    background: rgba(0, 0, 0, 0.4);
  }
  .accordion ul:active li:active a * {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  
  
  @media screen and (max-width: 600px) {
    body {
      margin: 0;
    }
  
    .accordion {
      height: auto;
    }
    .accordion ul li, .accordion ul li:active, .accordion ul:active li, .accordion ul:active li:active {
      position: relative;
      display: table;
      table-layout: fixed;
      width: 100%;
      -webkit-transition: none;
      transition: none;
    }
    .accordion ul li div, .accordion ul li span, .accordion ul li:active div, .accordion ul li:active span, .accordion ul:active li div, .accordion ul:active li span, .accordion ul:active li:active div, .accordion ul:active li:active span {
      display: table-cell;
      width: 100%;
      vertical-align: bottom;
    }
  }
  .about {
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    color: #666;
  }
  .about a {
    color: blue;
    text-decoration: none;
  }
  .about a:active {
    text-decoration: underline;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en" &gt;
  
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Responsive Accordion (Inline Images)&lt;/title&gt;
    
    
     &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
        &lt;link rel="stylesheet" href="css/style.css"&gt;
  
    
  &lt;/head&gt;
  
  &lt;body&gt;
  
    &lt;h1&gt;Responsive Accordion&lt;/h1&gt;
  &lt;div class="accordion"&gt;
    &lt;ul&gt;
      &lt;li&gt;
        &lt;div&gt;
          &lt;span&gt;
    
            &lt;img src="http://michael-ferry.com/assets/accordion1.jpg"&gt;
          &lt;/span&gt;
          &lt;a href="#"&gt;
            &lt;h2&gt;Lorem Ipsum&lt;/h2&gt;
            &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit&lt;/p&gt;
          &lt;/a&gt;
        &lt;/div&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;div&gt;
          &lt;span&gt;
            &lt;img src="http://michael-ferry.com/assets/accordion2.jpg"&gt;
          &lt;/span&gt;
          &lt;a href="#"&gt;
            &lt;h2&gt;Lorem Ipsum&lt;/h2&gt;
            &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit&lt;/p&gt;
          &lt;/a&gt;
        &lt;/div&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;div&gt;
          &lt;span&gt;
            &lt;img src="http://michael-ferry.com/assets/accordion3.jpg"&gt;
          &lt;/span&gt;
          &lt;a href="#"&gt;
            &lt;h2&gt;Lorem Ipsum&lt;/h2&gt;
            &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit&lt;/p&gt;
          &lt;/a&gt;
        &lt;/div&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;div&gt;
          &lt;span&gt;
            &lt;img src="http://michael-ferry.com/assets/accordion4.jpg"&gt;
          &lt;/span&gt;
          &lt;a href="#"&gt;
            &lt;h2&gt;Lorem Ipsum&lt;/h2&gt;
            &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit&lt;/p&gt;
          &lt;/a&gt;
        &lt;/div&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;div&gt;
          &lt;span&gt;
            &lt;img src="http://michael-ferry.com/assets/accordion5.jpg"&gt;
          &lt;/span&gt;
          &lt;a href="#"&gt;
            &lt;h2&gt;Lorem Ipsum&lt;/h2&gt;
            &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit&lt;/p&gt;
          &lt;/a&gt;
        &lt;/div&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;div&gt;
          &lt;span&gt;
            &lt;img src="http://michael-ferry.com/assets/accordion6.jpg"&gt;
          &lt;/span&gt;
          &lt;a href="#"&gt;
            &lt;h2&gt;Lorem Ipsum&lt;/h2&gt;
            &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit&lt;/p&gt;
          &lt;/a&gt;
        &lt;/div&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I would like to keep the accordion open after the user click.</p>
  
  <p>I don't know what is the best way to do that, use the checkbox hack? Use js or jquery or something else?</p>
  
  <p>I tried to add these lines of code :</p>
  
  <pre><code>var $box_each = $(".accordion ul li a");
  
  $box_each.click(function() {
      console.log('test');
      $box_each.removeClass('active');
      $(this).addClass('active');
  });
  </code></pre>
  
  <p>And also with jQuery : </p>
  
  <pre><code>jQuery('accordion').click(function(){
     jQuery(this).toggleClass('active');
  });
  </code></pre>