Using JQuery to create an animated slideToggle effect for a multicolumn list

Question

Using JQuery to create an animated slideToggle effect for a multicolumn list

I have a large list where each li element has a width of 33%, resulting in 3 columns:

computers   monitors   hi-fi
sex-toys    pancakes   scissors

Each column contains a hidden UL, which is revealed through slideToggle on click.

JQuery

$('.subCategory > .parentleaf:has(ul) > .categoryicon').click(function() {
    $(this).siblings('ul').slideToggle('fast');
    });

The issue is that the sliding behavior is not as desired, causing the list to rearrange like this:

computers   monitors   hi-fi
[li]cars    sex-toys   pancakes
[li]dogs    scissors

The desired sliding effect should look like this:

computers   monitors   hi-fi
[li]cars    pancakes   scissors
[li]dogs
sex-toys

How can I achieve this?

jsFiddle

jsFiddle 2 - in this case need the red bg color be for 3 columns

javascript jquery html css list

Answer 1

Answer №1

I've introduced a clearer div after every set of three li elements.

<ul class="subCategory">
    <li class="parentleaf">
        <span class="categoryicon">click</span>
        <span class="categoryname">Cars</span>
        <ul class="submenu">
            <li><a href="#">Car 1</a></li>
            <li><a href="#">Car 2</a></li> 
            <li><a href="#">Car 3</a></li>
            <li><a href="#">Car 4</a></li>
        </ul>
    </li>
    <li class="parentleaf">
        <span class="categoryicon">click</span>
        <span class="categoryname">Phones</span>
        <ul class="submenu">
            <li><a href="#">Phone 1</a></li>
            <li><a href="#">Phone 2</a></li> 
            <li><a href="#">Phone 3</a></li>
            <li><a href="#">Phone 4</a></li>
        </ul>
    </li>  
    <li class="parentleaf">
        <span class="categoryicon">click</span>
        <span class="categoryname">Guns</span>
        <ul class="submenu">
            <li><a href="#">Gun 1</a></li>
            <li><a href="#">Gun 2</a></li> 
            <li><a href="#">Gun 3</a></li>
            <li><a href="#">Gun 4</a></li>
        </ul>
    </li>   
    <div class="clearer"></div>
    <li class="parentleaf">
        <span class="categoryicon">click</span>
        <span class="categoryname">Notebooks</span>
        <ul class="submenu">
            <li><a href="#">Notebook 1</a></li>
            <li><a href="#">Notebook 2</a></li> 
            <li><a href="#">Notebook 3</a></li>
            <li><a href="#">Notebook 4</a></li>
        </ul>
    </li>

CSS

.clearer
{
    clear:both; 
}

You can determine the index of the clicked li and dynamically add or remove a clearer div using JavaScript, but for this scenario, it is not necessary.

Answer 2

I've introduced a clearer div after every set of three li elements.

<ul class="subCategory">
    <li class="parentleaf">
        <span class="categoryicon">click</span>
        <span class="categoryname">Cars</span>
        <ul class="submenu">
            <li><a href="#">Car 1</a></li>
            <li><a href="#">Car 2</a></li> 
            <li><a href="#">Car 3</a></li>
            <li><a href="#">Car 4</a></li>
        </ul>
    </li>
    <li class="parentleaf">
        <span class="categoryicon">click</span>
        <span class="categoryname">Phones</span>
        <ul class="submenu">
            <li><a href="#">Phone 1</a></li>
            <li><a href="#">Phone 2</a></li> 
            <li><a href="#">Phone 3</a></li>
            <li><a href="#">Phone 4</a></li>
        </ul>
    </li>  
    <li class="parentleaf">
        <span class="categoryicon">click</span>
        <span class="categoryname">Guns</span>
        <ul class="submenu">
            <li><a href="#">Gun 1</a></li>
            <li><a href="#">Gun 2</a></li> 
            <li><a href="#">Gun 3</a></li>
            <li><a href="#">Gun 4</a></li>
        </ul>
    </li>   
    <div class="clearer"></div>
    <li class="parentleaf">
        <span class="categoryicon">click</span>
        <span class="categoryname">Notebooks</span>
        <ul class="submenu">
            <li><a href="#">Notebook 1</a></li>
            <li><a href="#">Notebook 2</a></li> 
            <li><a href="#">Notebook 3</a></li>
            <li><a href="#">Notebook 4</a></li>
        </ul>
    </li>

CSS

.clearer
{
    clear:both; 
}

You can determine the index of the clicked li and dynamically add or remove a clearer div using JavaScript, but for this scenario, it is not necessary.

Using JQuery to create an animated slideToggle effect for a multicolumn list

Answer №1

Similar questions

Problem with the datepicker in mgcrea.ngStrap

Switch between two tabs with the convenient toggle button

Is there a way to store a jQuery CSS manipulation within a cookie?

Struggling to make the height attribute work in Bootstrap 4 alpha

"An issue has arisen in MongoDB when attempting to save data, resulting in an error message

Run the Ionic function only when the app is launched for the first time

What is causing my checkboxes to deactivate other selections?

Discovering the XPath for a Tag containing both span and div attributes

utilizing a modal to trigger a function within the parent scope of an Angular application

What changes can I make to this jquery code to utilize a background image instead of a background color?

Background of jQuery-UI Slider

How can I break down an object with hyphenated key names?

Modify the color of CSS for all elements except those contained within a specific parent using jQuery

Looking for assistance with deleting a child element in an XML file using PHP

Invoke a PHP function located in a separate file using a JavaScript function to fetch data from a database

Automated tool for generating random JSON objects

The function, stored as state within a context provider, is experiencing only one update

Send multiple form submissions using JQuery Ajax without needing to refresh the page

What could be causing this ajax function to fail?

Nuxt issue: Vue router push not reflecting query updates