css animation only works once

I have this code. I want the toggle to have an easeOut animation every time it opens and closes, but it only works when opening it the first time.

 $('.toggle-content:not(.opened), .content-tab:not(.opened)').hide();

    $('.tab-index a').click(function () {
        $(this).parent().next().slideToggle(300, 'easeOutExpo', function () {
            if ($(this).is(':visible'))
                $(this).css('display', 'table-row');
            else
                $(this).css('display', 'hidden')
        });
        $(this).parent().toggleClass('tab-opened tab-closed');
        $(this).children('i').toggleClass('icon-plus-sign icon-minus-sign');
        $(this).attr('text', ($(this).attr('text') == 'Close') ? 'Open' : 'Close');
        return false;
    });

Here is an example of where I want to use it:

   
	   <div class="toggle">
	  <p class="tab-index tab-closed">
          <a href="#" title="Close"><i class="icon-plus-sign"></i> text</a></p>
				                        <div class="content-tab closed">
				                            <p>text</p>
				                            
				                        </div>
				                    </div>
				         

I expected it to have the animation every time I opened or closed the toggle, but I am new to CSS and I don't know what exactly isn't working. Thank you in advance for helping me out!

If I change the code to negate the visible property, the animation works, but the text in the content-tab overflows.

Image example here

Here's the new code:

$('.toggle-content:not(.opened), content-tab:not(.visible)').hide();

    $('.tab-index a').click(function () {
        $(this).parent().next().slideToggle(300, 'easeOutExpo', function () {
            if ($(this).is(!':visible'))
                $(this).css('display', 'table-row');
            else
                $(this).css('display', 'hidden')
        });
        $(this).parent().toggleClass('tab-opened tab-closed');
        $(this).children('i').toggleClass('icon-plus-sign icon-minus-sign');
        $(this).attr('text', ($(this).attr('text') == 'Close') ? 'Open' : 'Close');
        return false;
    });

and the .content-tab class

.toggle .content-tab {
    border-left: 1px solid #CFCFCF;
    margin: 0 0 20px 10px;
    overflow-y:auto;

}

The HTML code remains like my original question

You added multiple parameters in your slideToggle function, Remove the duration (300) or the easing, And it will work, Here is an example

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

$('.toggle-content:not(.opened), .content-tab:not(.opened)').hide();
$('.tab-index a').click(function () {
    $(this).parent().next().slideToggle('easeOutExpo', function () {
        if ($(this).is(':visible'))
            $(this).css('display', 'table-row');
        else
            $(this).css('display', 'hidden')
    });
    $(this).parent().toggleClass('tab-opened tab-closed');
    $(this).children('i').toggleClass('icon-plus-sign icon-minus-sign');
    $(this).attr('text', ($(this).attr('text') == 'Close') ? 'Open' : 'Close');
    return false;
});

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="toggle">
    <p class="tab-index tab-closed">
        <a href="#" title="Close"><i class="icon-plus-sign"></i> text 1</a>
    </p>
    <div class="content-tab closed">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu diam non diam sagittis accumsan. Duis at quam semper, lobortis justo in, accumsan odio. Cras non nisl a libero tempus luctus a ac urna. Aenean egestas tellus posuere sapien mattis congue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent faucibus est urna, consectetur mattis tortor efficitur ac. Morbi malesuada ligula fermentum, bibendum felis dapibus, faucibus odio.</p>
    </div>
    
    <p class="tab-index tab-closed">
        <a href="#" title="Close"><i class="icon-plus-sign"></i> text 2</a>
    </p>
    <div class="content-tab closed">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu diam non diam sagittis accumsan. Duis at quam semper, lobortis justo in, accumsan odio. Cras non nisl a libero tempus luctus a ac urna. Aenean egestas tellus posuere sapien mattis congue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent faucibus est urna, consectetur mattis tortor efficitur ac. Morbi malesuada ligula fermentum, bibendum felis dapibus, faucibus odio.</p>
    </div>
    
    <p class="tab-index tab-closed">
        <a href="#" title="Close"><i class="icon-plus-sign"></i> text 3</a>
    </p>
    <div class="content-tab closed">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu diam non diam sagittis accumsan. Duis at quam semper, lobortis justo in, accumsan odio. Cras non nisl a libero tempus luctus a ac urna. Aenean egestas tellus posuere sapien mattis congue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent faucibus est urna, consectetur mattis tortor efficitur ac. Morbi malesuada ligula fermentum, bibendum felis dapibus, faucibus odio.</p>
    </div>
</div>

<!-- end snippet -->

Simple way:

Maybe you are using the other checks and instructions by purpose, but if not, here is an easy way, just use the slideToggle function, it will handle displaying the items for you without the other checks:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

$('.toggle-content:not(.opened), .content-tab:not(.opened)').hide();
$('.tab-index a').click(function () {
    $(this).parent().next().slideToggle('easeOutExpo');
});

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="toggle">
    <p class="tab-index tab-closed">
        <a href="#" title="Close"><i class="icon-plus-sign"></i> text 1</a>
    </p>
    <div class="content-tab closed">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu diam non diam sagittis accumsan. Duis at quam semper, lobortis justo in, accumsan odio. Cras non nisl a libero tempus luctus a ac urna. Aenean egestas tellus posuere sapien mattis congue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent faucibus est urna, consectetur mattis tortor efficitur ac. Morbi malesuada ligula fermentum, bibendum felis dapibus, faucibus odio.</p>
    </div>
    
    <p class="tab-index tab-closed">
        <a href="#" title="Close"><i class="icon-plus-sign"></i> text 2</a>
    </p>
    <div class="content-tab closed">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu diam non diam sagittis accumsan. Duis at quam semper, lobortis justo in, accumsan odio. Cras non nisl a libero tempus luctus a ac urna. Aenean egestas tellus posuere sapien mattis congue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent faucibus est urna, consectetur mattis tortor efficitur ac. Morbi malesuada ligula fermentum, bibendum felis dapibus, faucibus odio.</p>
    </div>
    
    <p class="tab-index tab-closed">
        <a href="#" title="Close"><i class="icon-plus-sign"></i> text 3</a>
    </p>
    <div class="content-tab closed">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu diam non diam sagittis accumsan. Duis at quam semper, lobortis justo in, accumsan odio. Cras non nisl a libero tempus luctus a ac urna. Aenean egestas tellus posuere sapien mattis congue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent faucibus est urna, consectetur mattis tortor efficitur ac. Morbi malesuada ligula fermentum, bibendum felis dapibus, faucibus odio.</p>
    </div>
</div>

<!-- end snippet -->

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

document.addEventListener('DOMContentLoaded', () => {
	const accordions = document.querySelectorAll('.accordion');

	accordions.forEach(accordion => {
	  const toggles = accordion.querySelectorAll('.accordion-toggle');

	  toggles.forEach(toggle => {
		toggle.addEventListener('click', () => {
		  const activeToggle = accordion.querySelector('.active');
		  if (activeToggle && activeToggle !== toggle) {
			activeToggle.classList.remove('active');
			activeToggle.nextElementSibling.style.maxHeight = 0;
		  }
		  toggle.classList.toggle('active');
		  const content = toggle.nextElementSibling;
		  if (toggle.classList.contains('active')) {
			content.style.maxHeight = content.scrollHeight + 'px';
		  } else {
			content.style.maxHeight = 0;
		  }
		});
	  });
	});

});

<!-- language: lang-css -->

.accordion-toggle {
  cursor: pointer;
  padding: 10px;
  background-color: #eee;
  border: none;
  text-align: left;
  outline: none;
  font-size: 18px;
  transition: background-color 0.3s ease-out;
}

.accordion-toggle:hover {
  background-color: #ddd;
}

.accordion-content {
  padding: 0 10px 10px 10px;
  background-color: #f9f9f9;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
  max-height: 0;
}

.active {
  background-color: #ddd;
}

.active + .accordion-content {
  max-height: 500px;
  transition: max-height 0.3s ease-out;
}
.padding {
	padding: 30px 0;
}

<!-- language: lang-html -->

<div class="accordion">
	  <div class="accordion-toggle">Section 1</div>
	  <div class="accordion-content">
		<div class="padding">Content for section 1 goes here.</div>
	  </div>
	  <div class="accordion-toggle">Section 2</div>
	  <div class="accordion-content">
		<div class="padding">Content for section 2 goes here.</div>
	  </div>
	  <div class="accordion-toggle">Section 3</div>
	  <div class="accordion-content">
		<div class="padding">Content for section 3 goes here.</div>
	  </div>
	</div>

<!-- end snippet -->

LE: Working code here Enjoy