How can I get elements in this accordion to toggle and hide the content after clicking on them a second time?

Question

I have an accordion made with css3 that sets height of content to zero and then 150px when clicked on using the :target pseudo-class. I want to use jquery to make the content toggle when I click on the same item again how can I do it?

I've tried creating a separate class and using the toggleClass method in query.

$(document).ready(function() {
  $("a.accordion__trigger").click(function() {
    $("accordion__trigger").toggleClass("accordion__content__hidden");
  });
});

.final__accordion {
  position: relative;
  display: block;
  border: 1px solid #e0e0e0;
  font-size: 0.8rem;
}

.final__accordion .accordion__item {
  display: block;
  margin-top: 5px;
}

.final__accordion .accordion__content {
  display: flex;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.5);
  overflow: hidden;
  height: 0;
  -webkit-transition: height 1s ease, padding 0.3s linear;
  transition: height 1s ease, padding 0.3s linear;
}

.final__accordion .accordion__content p {
  padding: 20px;
  margin: 0;
  text-align: left;
  max-width: initial;
}

.final__accordion .accordion__content:target {
  height: 150px;
  text-align: left;
}

.accordion__content__hidden {
  height: 0;
}

.final__accordion .accordion__trigger {
  text-decoration: none;
}

.final__accordion .accordion__title {
  position: relative;
  display: block;
  margin: 0;
  padding: 10px;
  font-size: 1em;
  background-color: rgb(234, 10, 42);
  color: #FFFFFF;
  border: 1px solid red;
  cursor: pointer;
}

.final__accordion .accordion__title:hover {
  background-color: red;
}

.final__accordion .accordion__title:after {
  position: absolute;
  top: calc(50% - 12px);
  right: 20px;
  width: 15px;
  height: 15px;
  border-left: 1px solid #FFFFFF;
  border-bottom: 1px solid #FFFFFF;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  content: "";
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="final__accordion" id="#accordion">
  <div class="accordion__item">
    <a href="#final__tab1" class="accordion__trigger accordion__title">Accordion 1</a>
    <div id="final__tab1" class="accordion__content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor laborum, rerum quasi rem placeat quo ratione qui.</p>
    </div>
  </div>
  <div class="accordion__item">
    <a href="#final__tab2" class="accordion__trigger accordion__title">Accordion 2</a>
    <div id="final__tab2" class="accordion__content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor laborum, rerum quasi rem placeat quo ratione qui.</p>
    </div>
  </div>
  <div class="accordion__item">
    <a href="#final__tab3" class="accordion__trigger accordion__title">Accordion 3</a>
    <div id="final__tab3" class="accordion__content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor laborum, rerum quasi rem placeat quo ratione qui.</p>
    </div>
  </div>
  <div class="accordion__item">
    <a href="#final__tab4" class="accordion__trigger accordion__title">Accordion 4</a>
    <div id="final__tab4" class="accordion__content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor laborum, rerum quasi rem placeat quo ratione qui.</p>
    </div>
  </div>
  <div class="accordion__item">
    <a href="#final__tab5" class="accordion__trigger accordion__title">Accordion 5</a>
    <div id="final__tab5" class="accordion__content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor laborum, rerum quasi rem placeat quo ratione qui.</p>
    </div>
  </div>
  <div class="accordion__item">
    <a href="#final__tab6" class="accordion__trigger accordion__title">Accordion 6</a>
    <div id="final__tab6" class="accordion__content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor laborum, rerum quasi rem placeat quo ratione qui.</p>
    </div>
  </div>
</div>

Answer 1

I would suggest you to toggle a Class on content element on click of anchor element. And also if you add :target style on toggleClass name in CSS then it will work like charm.

For your info, I have changed the jQuery click event to : $(this).parent().find(".accordion__content").toggleClass("accordion__content__hidden"); and changed the target style from accordion__content:target to accordion__content__hidden:target CSS.

See the Snippet below:

$(document).ready(function() {
  $("a.accordion__trigger").click(function() {
    $(this).parent().find(".accordion__content").toggleClass("accordion__content__hidden");
  });
});

.final__accordion {
  position: relative;
  display: block;
  border: 1px solid #e0e0e0;
  font-size: 0.8rem;
}

.final__accordion .accordion__item {
  display: block;
  margin-top: 5px;
}

.final__accordion .accordion__content {
  display: flex;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.5);
  overflow: hidden;
  height: 0;
  -webkit-transition: height 1s ease, padding 0.3s linear;
  transition: height 1s ease, padding 0.3s linear;
}

.final__accordion .accordion__content p {
  padding: 20px;
  margin: 0;
  text-align: left;
  max-width: initial;
}

.final__accordion .accordion__content__hidden:target { /*CHANGED TARGET ON TOGGLE CLASSNAME*/
  height: 150px;
  text-align: left;
}

.accordion__content__hidden {
  height: 0;
}

.final__accordion .accordion__trigger {
  text-decoration: none;
}

.final__accordion .accordion__title {
  position: relative;
  display: block;
  margin: 0;
  padding: 10px;
  font-size: 1em;
  background-color: rgb(234, 10, 42);
  color: #FFFFFF;
  border: 1px solid red;
  cursor: pointer;
}

.final__accordion .accordion__title:hover {
  background-color: red;
}

.final__accordion .accordion__title:after {
  position: absolute;
  top: calc(50% - 12px);
  right: 20px;
  width: 15px;
  height: 15px;
  border-left: 1px solid #FFFFFF;
  border-bottom: 1px solid #FFFFFF;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  content: "";
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="final__accordion" id="#accordion">
  <div class="accordion__item">
    <a href="#final__tab1" class="accordion__trigger accordion__title">Accordion 1</a>
    <div id="final__tab1" class="accordion__content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor laborum, rerum quasi rem placeat quo ratione qui.</p>
    </div>
  </div>
  <div class="accordion__item">
    <a href="#final__tab2" class="accordion__trigger accordion__title">Accordion 2</a>
    <div id="final__tab2" class="accordion__content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor laborum, rerum quasi rem placeat quo ratione qui.</p>
    </div>
  </div>
  <div class="accordion__item">
    <a href="#final__tab3" class="accordion__trigger accordion__title">Accordion 3</a>
    <div id="final__tab3" class="accordion__content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor laborum, rerum quasi rem placeat quo ratione qui.</p>
    </div>
  </div>
  <div class="accordion__item">
    <a href="#final__tab4" class="accordion__trigger accordion__title">Accordion 4</a>
    <div id="final__tab4" class="accordion__content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor laborum, rerum quasi rem placeat quo ratione qui.</p>
    </div>
  </div>
  <div class="accordion__item">
    <a href="#final__tab5" class="accordion__trigger accordion__title">Accordion 5</a>
    <div id="final__tab5" class="accordion__content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor laborum, rerum quasi rem placeat quo ratione qui.</p>
    </div>
  </div>
  <div class="accordion__item">
    <a href="#final__tab6" class="accordion__trigger accordion__title">Accordion 6</a>
    <div id="final__tab6" class="accordion__content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor laborum, rerum quasi rem placeat quo ratione qui.</p>
    </div>
  </div>
</div>