How to add jquery to open table-CodePudding

I have a problem setting jquery to open table on click, i am not a developer yet so please be patient.

here is what i have(HTML, CSS)

HTML

<ul >
<li ><a href="#">1</a></li> 
<li ><a href="#">2</a></li>
<div>
<i ></i>
</div>
<li ><a href="#">3</a></li>
<li ><a href="#">4</a></li>
</ul>

CSS

.dnone {
    display: none;
}

CodePudding user response：

You can try this:

Add open class to the icon element and hide class to the li items.

HTML

<ul >
    <li ><a href="#">1</a></li>
    <li ><a href="#">2</a></li>
    <div>
        <i ></i>
    </div>
    <li ><a href="#">3</a></li>
    <li ><a href="#">4</a></li>
</ul>

Remove/Add/toggle class on click.

JQUERY

$('.open').click(function() {

    $('.hide').toggle(' dnone');
    
});

Also you can add a bit of animation for the caret icon.

On click, add CSS class to rotate the caret.

JQUERY

$('.open').click(function() {

    if($(this).hasClass('rotate-180')) {
        $(this).removeClass('rotate-180');
    } else {
        $(this).addClass(' rotate-180');
    }
    $('.hide').toggle(' dnone');
    
});

Add this CSS declaration to your stylesheet.

CSS

.rotate-180 {
    transform: rotate(180deg);
}