css animation only works once - Html

elena
March 9, 2023
158 views
2 votes
3 Answers

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!

Answers

Chosen as BEST ANSWER

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

(Edit)

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;
          }
        });
      });
    });

});

.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;
}

<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>

LE: Working code here Enjoy

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

$('.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;
});

<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>

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:

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

<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>

Please signup or login to give your own answer.

Click here to cancel reply.

css animation only works once – Html

Answers