Question

I have multiple <li> elements which contain multiple <div> elements. Some of them have a starting display property of none.
Based on mouse interaction, I want to show or hide some of the <div> elements.

CSS transitions can’t transition display changes. And setting height and opacity to 0 isn’t a good idea, some of the elements have inputs or buttons.

So the next step was to use JavaScript for animations. I’m using jQuery.

My problem is that elements that need to be hidden or shown in parallel. Because of the DOM structure I can’t just hide or show the parent because some of the elements will be hidden while others will be shown.

So my question is, how would one efficiently handle multiple parallel animations (fades and slides mostly) on multiple elements while keeping code clean and maintainable and performance as good as possible.

An example of markup, where the div elements need to be show or hidden:

<ul>
    <li>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </li>
    <li>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </li>
    <li>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </li>
</ul>

Thank you.

Answer 1

You can assign the same class to each set of elements that you want to display and hide together. If this doesn’t sound familiar you’re probably going to need to take some time to familiarize yourself with that concept. This should get you started: http://api.jquery.com/hide/

<div class="first-class"></div>
<div class="second-class"></div>
<div class="third-class"></div>
<div class="first-class"></div>
<div class="third-class"></div>
<div class="second-class"></div>