How do I create an open and closed status on my accordion?

Question

I know there's a couples of threads here on accordions but none of them seem to match my current structure, which up until this point I thought it was pretty effective. I'm trying to work on building elements from scratch as a learning method and build the following accordion after some googling and experimenting. The only issue at this moment is that if I click another question while there's one already open, the already open one will maintain the CSS as if it's still open and thus removeClass isn't working. It only removes the class if click on the question that is already open, close it, and then open another one.

$(".toggle-trigger").on("click", function() {
  var content = $(this).parent().find(".toggle-container");
  var title = $(this).parent().find(".toggle-trigger");

  if ($(content).hasClass("open")) {
    $(content).slideUp(500).removeClass("open");
    $(title).removeClass("open");

  } else {
    $(".toggle-container.open").slideUp(500).removeClass("open"); //will close all others
    $(content).slideDown(500).addClass("open");
    $(title).addClass("open");
  }
});

body {
  background-color: grey;
  font-family: sans-serif;
}

.toggle {
  padding: 1rem;
  background-color: cyan;
  border-radius: 10px;
  margin-bottom: 1rem;
  
}

.toggle-trigger {
  margin: 0px !important;
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMjQgMTBoLTEwdi0xMGgtNHYxMGgtMTB2NGgxMHYxMGg0di0xMGgxMHoiLz48L3N2Zz4=');
  background-position: 100% 50%;
  background-size: 1rem;
  background-repeat: no-repeat;
  font-weight: 500;
}

.toggle-trigger:hover {
  text-decoration: none;
  cursor: pointer;
}

.toggle-trigger a {
  color: #333;
  text-decoration: none;
  display: block;
}

.toggle-trigger.open {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMCAxMGgyNHY0aC0yNHoiLz48L3N2Zz4=') !important;
  font-weight: 600;
}

.toggle-container {
  overflow: hidden;
  padding: 1rem;
  font-weight: 300;
  line-height: 1.3;
  display: none;
}

.toggle-container .extra {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="toggle">
  <div class="toggle-trigger">Question 1</div>
  <div class="toggle-container">
    Ut fringilla varius ipsum, id faucibus orci aliquet id. Donec ipsum nibh, placerat vel efficitur sed, finibus eget velit. Sed ultrices bibendum fringilla. Donec diam felis, scelerisque nec fermentum in, consectetur eget mi. Nulla elementum nunc a auctor
    gravida. Suspendisse arcu ipsum, rutrum a scelerisque sit amet, ultrices aliquet leo. Praesent at ex vitae arcu tempor tincidunt quis non magna. Integer fermentum eros et tempor feugiat. Phasellus tincidunt sem ac nunc laoreet, ultricies porttitor
    arcu ullamcorper. Nam vitae justo congue, molestie mi elementum, vehicula est. Maecenas vel magna condimentum, varius risus vitae, pretium leo. Nunc blandit est non velit feugiat, a luctus magna blandit. Curabitur pulvinar euismod elementum. Aenean
    consectetur odio magna, in lacinia lacus lacinia eu. In aliquam ex quis lectus ultricies lacinia. Donec lobortis ex metus, et consequat lorem aliquet non.
    <div class="extra">Extra information like <a href="#">Links</a></div>
  </div>
</div>

<div class="toggle">
  <div class="toggle-trigger">Question 2</div>
  <div class="toggle-container">
    Ut fringilla varius ipsum, id faucibus orci aliquet id. Donec ipsum nibh, placerat vel efficitur sed, finibus eget velit. Sed ultrices bibendum fringilla. Donec diam felis, scelerisque nec fermentum in, consectetur eget mi. Nulla elementum nunc a auctor
    gravida. Suspendisse arcu ipsum, rutrum a scelerisque sit amet, ultrices aliquet leo. Praesent at ex vitae arcu tempor tincidunt quis non magna. Integer fermentum eros et tempor feugiat. Phasellus tincidunt sem ac nunc laoreet, ultricies porttitor
    arcu ullamcorper. Nam vitae justo congue, molestie mi elementum, vehicula est. Maecenas vel magna condimentum, varius risus vitae, pretium leo. Nunc blandit est non velit feugiat, a luctus magna blandit. Curabitur pulvinar euismod elementum. Aenean
    consectetur odio magna, in lacinia lacus lacinia eu. In aliquam ex quis lectus ultricies lacinia. Donec lobortis ex metus, et consequat lorem aliquet non.
    <div class="extra">Extra information like <a href="#">Links</a></div>
  </div>
</div>

<div class="toggle">
  <div class="toggle-trigger">Question 3</div>
  <div class="toggle-container">
    Ut fringilla varius ipsum, id faucibus orci aliquet id. Donec ipsum nibh, placerat vel efficitur sed, finibus eget velit. Sed ultrices bibendum fringilla. Donec diam felis, scelerisque nec fermentum in, consectetur eget mi. Nulla elementum nunc a auctor
    gravida. Suspendisse arcu ipsum, rutrum a scelerisque sit amet, ultrices aliquet leo. Praesent at ex vitae arcu tempor tincidunt quis non magna. Integer fermentum eros et tempor feugiat. Phasellus tincidunt sem ac nunc laoreet, ultricies porttitor
    arcu ullamcorper. Nam vitae justo congue, molestie mi elementum, vehicula est. Maecenas vel magna condimentum, varius risus vitae, pretium leo. Nunc blandit est non velit feugiat, a luctus magna blandit. Curabitur pulvinar euismod elementum. Aenean
    consectetur odio magna, in lacinia lacus lacinia eu. In aliquam ex quis lectus ultricies lacinia. Donec lobortis ex metus, et consequat lorem aliquet non.
    <div class="extra">Extra information like <a href="#">Links</a></div>
  </div>
</div>

Answer 1

One other option that may prove useful is to have 'open' and 'close' events so that they can be triggered from elsewhere (such as an 'open all' button in this example).

/* create some open and close events that actually do the work */
$(".toggle").on("open", function(){
  $(this).addClass("open").find(".toggle-container").slideDown(500);
});
$(".toggle").on("close", function(){
  $(this).removeClass("open").find(".toggle-container").slideUp(500);
});

/* listen for clicks in the toggle triggers: */
$(".toggle-trigger").on("click", function() {
  var $thisToggle = $(this).parent();
  var $otherToggles = $(".toggle").not($thisToggle);
  $otherToggles.trigger("close");//comment out this line if you want to allow more than one .toggle to be open at a time
  $thisToggle.trigger(($thisToggle.hasClass("open"))?"close":"open");
});

/* now that we have open and close events we can trigger them from elsewhere if required: */
$(".openall").on("click", function() {
  $(".toggle").trigger("open");
});
$(".closeall").on("click", function() {
  $(".toggle").trigger("close");
});

body {
  background-color: grey;
  font-family: sans-serif;
}

.toggle {
  padding: 1rem;
  background-color: cyan;
  border-radius: 10px;
  margin-bottom: 1rem;
  
}

.toggle-trigger {
  margin: 0px !important;
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMjQgMTBoLTEwdi0xMGgtNHYxMGgtMTB2NGgxMHYxMGg0di0xMGgxMHoiLz48L3N2Zz4=');
  background-position: 100% 50%;
  background-size: 1rem;
  background-repeat: no-repeat;
  font-weight: 500;
}

.toggle-trigger:hover {
  text-decoration: none;
  cursor: pointer;
}

.toggle-trigger a {
  color: #333;
  text-decoration: none;
  display: block;
}

.toggle.open .toggle-trigger {
  /* optional styles for when this element is within an open toggle */
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMCAxMGgyNHY0aC0yNHoiLz48L3N2Zz4=') !important;
  font-weight: 600;
}

.toggle-container {
  overflow: hidden;
  padding: 1rem;
  font-weight: 300;
  line-height: 1.3;
  display: none;
}

.toggle.open .toggle-container {
  /* optional styles for when this element is within an open toggle */
  /* for example, you could animate the height here instead of using JS */
}

.toggle-container .extra {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="toggle">
  <div class="toggle-trigger">Question 1</div>
  <div class="toggle-container">
    Ut fringilla varius ipsum, id faucibus orci aliquet id. Donec ipsum nibh, placerat vel efficitur sed, finibus eget velit. Sed ultrices bibendum fringilla. Donec diam felis, scelerisque nec fermentum in, consectetur eget mi. Nulla elementum nunc a auctor
    gravida. Suspendisse arcu ipsum, rutrum a scelerisque sit amet, ultrices aliquet leo. Praesent at ex vitae arcu tempor tincidunt quis non magna. Integer fermentum eros et tempor feugiat. Phasellus tincidunt sem ac nunc laoreet, ultricies porttitor
    arcu ullamcorper. Nam vitae justo congue, molestie mi elementum, vehicula est. Maecenas vel magna condimentum, varius risus vitae, pretium leo. Nunc blandit est non velit feugiat, a luctus magna blandit. Curabitur pulvinar euismod elementum. Aenean
    consectetur odio magna, in lacinia lacus lacinia eu. In aliquam ex quis lectus ultricies lacinia. Donec lobortis ex metus, et consequat lorem aliquet non.
    <div class="extra">Extra information like <a href="#">Links</a></div>
  </div>
</div>

<div class="toggle">
  <div class="toggle-trigger">Question 2</div>
  <div class="toggle-container">
    Ut fringilla varius ipsum, id faucibus orci aliquet id. Donec ipsum nibh, placerat vel efficitur sed, finibus eget velit. Sed ultrices bibendum fringilla. Donec diam felis, scelerisque nec fermentum in, consectetur eget mi. Nulla elementum nunc a auctor
    gravida. Suspendisse arcu ipsum, rutrum a scelerisque sit amet, ultrices aliquet leo. Praesent at ex vitae arcu tempor tincidunt quis non magna. Integer fermentum eros et tempor feugiat. Phasellus tincidunt sem ac nunc laoreet, ultricies porttitor
    arcu ullamcorper. Nam vitae justo congue, molestie mi elementum, vehicula est. Maecenas vel magna condimentum, varius risus vitae, pretium leo. Nunc blandit est non velit feugiat, a luctus magna blandit. Curabitur pulvinar euismod elementum. Aenean
    consectetur odio magna, in lacinia lacus lacinia eu. In aliquam ex quis lectus ultricies lacinia. Donec lobortis ex metus, et consequat lorem aliquet non.
    <div class="extra">Extra information like <a href="#">Links</a></div>
  </div>
</div>

<div class="toggle">
  <div class="toggle-trigger">Question 3</div>
  <div class="toggle-container">
    Ut fringilla varius ipsum, id faucibus orci aliquet id. Donec ipsum nibh, placerat vel efficitur sed, finibus eget velit. Sed ultrices bibendum fringilla. Donec diam felis, scelerisque nec fermentum in, consectetur eget mi. Nulla elementum nunc a auctor
    gravida. Suspendisse arcu ipsum, rutrum a scelerisque sit amet, ultrices aliquet leo. Praesent at ex vitae arcu tempor tincidunt quis non magna. Integer fermentum eros et tempor feugiat. Phasellus tincidunt sem ac nunc laoreet, ultricies porttitor
    arcu ullamcorper. Nam vitae justo congue, molestie mi elementum, vehicula est. Maecenas vel magna condimentum, varius risus vitae, pretium leo. Nunc blandit est non velit feugiat, a luctus magna blandit. Curabitur pulvinar euismod elementum. Aenean
    consectetur odio magna, in lacinia lacus lacinia eu. In aliquam ex quis lectus ultricies lacinia. Donec lobortis ex metus, et consequat lorem aliquet non.
    <div class="extra">Extra information like <a href="#">Links</a></div>
  </div>
</div>

<a href="#" class="openall">open all</a> <a href="#" class="closeall">close all</a>

Answer 2

Hope below available toggle methods can give you hint to fix your issue.

 $(".toggle-trigger").on("click", function() { 
var content = $(this).parent().find(".toggle-container"); 
var title = $(this).parent().find(".toggle-trigger"); 

// slideUp & remove class from all
$(".toggle-container").slideUp().removeClass('open'); 
$(".toggle-trigger").removeClass('open');

// add class on current  & do slideDown
content.addClass("open").slideDown(500); 
title.addClass("open"); 
});

Answer 3

Hope below available toggle methods can give you hint to fix your issue.

$(".toggle-trigger").on("click", function() { 
     var content = $(this).parent().find(".toggle-container"); 
     var title = $(this).parent().find(".toggle-trigger"); 

     // slideUp & remove class from all
    $(".toggle-container").slideUp().removeClass('open'); 
    $(".toggle-trigger").removeClass('open');

    // add class on current  & do slideDown
    content.addClass("open").slideDown(500); 
    title.addClass("open"); 

});

Answer 4

$(".toggle-trigger").on("click", function() {
  var content = $(this).parent().find(".toggle-container");
  var title = $(this).parent().find(".toggle-trigger");

  if ($(content).hasClass("open")) {
    $(content).slideUp(500).removeClass("open");
    $(title).removeClass("open");

  } else {
    $(".toggle-container.open").slideUp(500).removeClass("open"); //will close all others
    $(".toggle-trigger.open").removeClass("open"); //add this line
    $(content).slideDown(500).addClass("open");
    $(title).addClass("open");
  }
});

body {
  background-color: grey;
  font-family: sans-serif;
}

.toggle {
  padding: 1rem;
  background-color: cyan;
  border-radius: 10px;
  margin-bottom: 1rem;
  
}

.toggle-trigger {
  margin: 0px !important;
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMjQgMTBoLTEwdi0xMGgtNHYxMGgtMTB2NGgxMHYxMGg0di0xMGgxMHoiLz48L3N2Zz4=');
  background-position: 100% 50%;
  background-size: 1rem;
  background-repeat: no-repeat;
  font-weight: 500;
}

.toggle-trigger:hover {
  text-decoration: none;
  cursor: pointer;
}

.toggle-trigger a {
  color: #333;
  text-decoration: none;
  display: block;
}

.toggle-trigger.open {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMCAxMGgyNHY0aC0yNHoiLz48L3N2Zz4=') !important;
  font-weight: 600;
}

.toggle-container {
  overflow: hidden;
  padding: 1rem;
  font-weight: 300;
  line-height: 1.3;
  display: none;
}

.toggle-container .extra {
  color: red;
}

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

<div class="toggle">
  <div class="toggle-trigger">Question 1</div>
  <div class="toggle-container">
    Ut fringilla varius ipsum, id faucibus orci aliquet id. Donec ipsum nibh, placerat vel efficitur sed, finibus eget velit. Sed ultrices bibendum fringilla. Donec diam felis, scelerisque nec fermentum in, consectetur eget mi. Nulla elementum nunc a auctor
    gravida. Suspendisse arcu ipsum, rutrum a scelerisque sit amet, ultrices aliquet leo. Praesent at ex vitae arcu tempor tincidunt quis non magna. Integer fermentum eros et tempor feugiat. Phasellus tincidunt sem ac nunc laoreet, ultricies porttitor
    arcu ullamcorper. Nam vitae justo congue, molestie mi elementum, vehicula est. Maecenas vel magna condimentum, varius risus vitae, pretium leo. Nunc blandit est non velit feugiat, a luctus magna blandit. Curabitur pulvinar euismod elementum. Aenean
    consectetur odio magna, in lacinia lacus lacinia eu. In aliquam ex quis lectus ultricies lacinia. Donec lobortis ex metus, et consequat lorem aliquet non.
    <div class="extra">Extra information like <a href="#">Links</a></div>
  </div>
</div>

<div class="toggle">
  <div class="toggle-trigger">Question 2</div>
  <div class="toggle-container">
    Ut fringilla varius ipsum, id faucibus orci aliquet id. Donec ipsum nibh, placerat vel efficitur sed, finibus eget velit. Sed ultrices bibendum fringilla. Donec diam felis, scelerisque nec fermentum in, consectetur eget mi. Nulla elementum nunc a auctor
    gravida. Suspendisse arcu ipsum, rutrum a scelerisque sit amet, ultrices aliquet leo. Praesent at ex vitae arcu tempor tincidunt quis non magna. Integer fermentum eros et tempor feugiat. Phasellus tincidunt sem ac nunc laoreet, ultricies porttitor
    arcu ullamcorper. Nam vitae justo congue, molestie mi elementum, vehicula est. Maecenas vel magna condimentum, varius risus vitae, pretium leo. Nunc blandit est non velit feugiat, a luctus magna blandit. Curabitur pulvinar euismod elementum. Aenean
    consectetur odio magna, in lacinia lacus lacinia eu. In aliquam ex quis lectus ultricies lacinia. Donec lobortis ex metus, et consequat lorem aliquet non.
    <div class="extra">Extra information like <a href="#">Links</a></div>
  </div>
</div>

<div class="toggle">
  <div class="toggle-trigger">Question 3</div>
  <div class="toggle-container">
    Ut fringilla varius ipsum, id faucibus orci aliquet id. Donec ipsum nibh, placerat vel efficitur sed, finibus eget velit. Sed ultrices bibendum fringilla. Donec diam felis, scelerisque nec fermentum in, consectetur eget mi. Nulla elementum nunc a auctor
    gravida. Suspendisse arcu ipsum, rutrum a scelerisque sit amet, ultrices aliquet leo. Praesent at ex vitae arcu tempor tincidunt quis non magna. Integer fermentum eros et tempor feugiat. Phasellus tincidunt sem ac nunc laoreet, ultricies porttitor
    arcu ullamcorper. Nam vitae justo congue, molestie mi elementum, vehicula est. Maecenas vel magna condimentum, varius risus vitae, pretium leo. Nunc blandit est non velit feugiat, a luctus magna blandit. Curabitur pulvinar euismod elementum. Aenean
    consectetur odio magna, in lacinia lacus lacinia eu. In aliquam ex quis lectus ultricies lacinia. Donec lobortis ex metus, et consequat lorem aliquet non.
    <div class="extra">Extra information like <a href="#">Links</a></div>
  </div>
</div>

change script

$(".toggle-trigger").on("click", function() {
  var content = $(this).parent().find(".toggle-container");
  var title = $(this).parent().find(".toggle-trigger");

  if ($(content).hasClass("open")) {
    $(content).slideUp(500).removeClass("open");
    $(title).removeClass("open");

  } else {
    $(".toggle-container.open").slideUp(500).removeClass("open"); //will close all others
    $(".toggle-trigger.open").removeClass("open"); //add this line
    $(content).slideDown(500).addClass("open");
    $(title).addClass("open");
  }
});