The jQuery siblings() method is used to get the sibling elements of the selected element.
The following example will highlight the siblings of the <li> element by adding the class .active on document ready.
In the initial step, you need to load the latest version of jQuery into your file.
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <ul> <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li> <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li> <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li> <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li> <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li> </ul>
ul li{ cursor: pointer; background: #008f8d; list-style: none; margin-bottom: 15px; padding: 7px 15px; } .active{ background: black; color: white; }
Finally, we will write down our jquery code.
$(document).ready(function(){ $('li').click( function(){ $(this).toggleClass('active').siblings().removeClass('active'); }); });