Accordion's Active Title properties not working properly

Question

I have created a accordion using html , css and jquery

I have added relevant css to change the active accordion title's background and opacity , it works pretty well

But the issue is - After i have tapped on the accordion title second time to minimize it , it still inherits in the active title properties

To make it normal like other inactive accordion title ,in addition to already having minimized it , i have to tap anywhere outside of the accordion

I hope someone can adjust the codes to fix this issue

JSBIN link here showing the output along with codes

Codes are included below in snippets

$(document).ready(function () {
  function close_accordion_section() {
    $('.accordion .accordion-section-title').removeClass('active');
    $('.accordion .accordion-section-content').slideUp(300).removeClass('open');
  }

  $('.accordion-section-title').click(function (e) {
    // Grab current anchor value
    var currentAttrValue = $(this).attr('href');

    if ($(e.target).is('.active')) {
      close_accordion_section();
    } else {
      close_accordion_section();

      // Add active class to section title
      $(this).addClass('active');
      // Open up the hidden content panel
      $('.accordion ' + currentAttrValue).slideDown(300).addClass('open');
    }

    e.preventDefault();
  });
});

/*----- Accordion -----*/

.accordion,
.accordion * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.accordion {
  overflow: hidden;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25);
  border-radius: 3px;
  background: #f7f7f7;
}


/*----- Section Titles -----*/

.accordion-section-title {
  width: 100%;
  padding: 15px;
  display: inline-block;
  border-bottom: 1px solid #1a1a1a;
  background: #333;
  transition: all linear 0.15s;
  /* Type */
  font-size: 1.200em;
  text-shadow: 0px 1px 0px #1a1a1a;
  color: #fff;
}

.accordion-section-title.active,
.accordion-section-title:hover {
  background: #4c4c4c;
  text-decoration: none;
  opacity: 0.5;
}

.accordion-section:last-child .accordion-section-title {
  border-bottom: none;
}


/*----- Section Content -----*/

.accordion-section-content {
  padding: 15px;
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>


<div class="accordion">
  <div class="accordion-section">
    <a class="accordion-section-title" href="#accordion-1">Accordion Section #1</a>
    <div id="accordion-1" class="accordion-section-content">
      <p>Mauris interdum fringilla augue vitae tincidunt. Curabitur vitae tortor id eros euismod ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent nulla mi, rutrum ut feugiat at, vestibulum ut neque? Cras tincidunt enim vel aliquet facilisis. Duis congue ullamcorper vehicula. Proin nunc lacus, semper sit amet elit sit amet, aliquet pulvinar erat. Nunc pretium quis sapien eu rhoncus. Suspendisse ornare gravida mi, et placerat tellus tempor vitae.</p>
    </div>
    <!--end .accordion-section-content-->
  </div>
  <!--end .accordion-section-->
</div>
<!--end .accordion-->

<div class="accordion">
  <div class="accordion-section">
    <a class="accordion-section-title" href="#accordion-2">Accordion Section #2</a>
    <div id="accordion-2" class="accordion-section-content">
      <p>Mauris interdum fringilla augue vitae tincidunt. Curabitur vitae tortor id eros euismod ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent nulla mi, rutrum ut feugiat at, vestibulum ut neque? Cras tincidunt enim vel aliquet facilisis. Duis congue ullamcorper vehicula. Proin nunc lacus, semper sit amet elit sit amet, aliquet pulvinar erat. Nunc pretium quis sapien eu rhoncus. Suspendisse ornare gravida mi, et placerat tellus tempor vitae.</p>
    </div>
    <!--end .accordion-section-content-->
  </div>
  <!--end .accordion-section-->
</div>
<!--end .accordion-->

Answer 1

The problem is on :hover rule in touch devices.

Disable it for only touch devices inserting the :hover inside @media of css rule.

Now your css is:

/*----- Accordion -----*/

.accordion,
.accordion * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.accordion {
  overflow: hidden;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25);
  border-radius: 3px;
  background: #f7f7f7;
}

/*----- Section Titles -----*/

.accordion-section-title {
  width: 100%;
  padding: 15px;
  display: inline-block;
  border-bottom: 1px solid #1a1a1a;
  background: #333;
  transition: all linear 0.15s;
  /* Type */
  font-size: 1.200em;
  text-shadow: 0px 1px 0px #1a1a1a;
  color: #fff;
}


@media (hover: hover) {
  .accordion-section-title:hover {
   background: #4c4c4c;
   text-decoration: none;
   opacity: 0.5;
  }
}
.accordion-section-title.active{
  background: #4c4c4c;
  text-decoration: none;
  opacity: 0.5;
}

.accordion-section:last-child .accordion-section-title {
  border-bottom: none;
}

/*----- Section Content -----*/

.accordion-section-content {
  padding: 15px;
  display: none;
}