Display elements with a particular class using jQuery

Question

Display elements with a particular class using jQuery

I want to utilize jQuery to show all elements within a UL that have the class .active.

Is this how my code should look?

if ($(this).hasClass('active')) {
      $( ".active" ).show();
    }

This is my HTML structure

<ul>
    <li><a>Menu item 1</a></li>
    <li class="active"><a>Menu item 2</a>
        <ul>
            <li><a>Menu item 2.1</a></li>
            <li class="active"><a>Menu item 2.2</a>
                <ul>
                    <li><a>Menu item 2.2.1</a></li>
                    <li class="active"><a>Menu item 2.2.2</a></li>
                    <li><a>Menu item 2.2.3</a></li>
                </ul>
            </li>
            <li><a>Menu item 2.3</a></li>
        </ul>
    </li>
    <li><a>Menu item 3</a></li>
</ul>

This is my CSS style

ul li ul 
    {
        display: none;
        overflow: hidden;
    }

jquery css show

Answer 1

Answer №1

It could potentially be simplified further:

$( "ul .active" ).display()

Answer 2

It could potentially be simplified further:

$( "ul .active" ).display()

Answer 3

Answer №2

There is no need to specifically check if the element has the active class, you can simply use this code:

$('ul .active').display();

This will search for any element with the active class within the ul and display it.

Answer 4

There is no need to specifically check if the element has the active class, you can simply use this code:

$('ul .active').display();

This will search for any element with the active class within the ul and display it.

Answer 5

Answer №3

Go through each <li> element and only show those with the class active:

<button onclick="start();">Try It</button>
<script type="text/javascript">
    function start() {
        $('li').each(function () {
            if ($(this).hasClass('active')) 
                $(this).show();
            else $(this).hide();
        })
    }
</script>

Answer 6

Go through each <li> element and only show those with the class active:

<button onclick="start();">Try It</button>
<script type="text/javascript">
    function start() {
        $('li').each(function () {
            if ($(this).hasClass('active')) 
                $(this).show();
            else $(this).hide();
        })
    }
</script>

Answer 7

Answer №4

Here is the code for your specific scenario:

if ($(this).hasClass('active')) {
  $(this).show();
}

Alternatively, you can directly target it this way:

$("ul .active").show();

Answer 8

Here is the code for your specific scenario:

if ($(this).hasClass('active')) {
  $(this).show();
}

Alternatively, you can directly target it this way:

$("ul .active").show();

Answer 9

Answer №5

It appears that some responses have overlooked the importance of not only displaying your hidden .active elements, but also the concealed ul elements within them. By utilizing a comma in the selector, you can accomplish both tasks simultaneously:

$("li.active ul, li.active").show();

To further narrow down the selection to items within a ul:

$("ul li.active ul, ul li.active").show();

Depending on how the page is styled, it might also be beneficial to remove the overflow:hidden attribute with .css("overflow", "auto") or a similar approach.

Answer 10

It appears that some responses have overlooked the importance of not only displaying your hidden .active elements, but also the concealed ul elements within them. By utilizing a comma in the selector, you can accomplish both tasks simultaneously:

$("li.active ul, li.active").show();

To further narrow down the selection to items within a ul:

$("ul li.active ul, ul li.active").show();

Depending on how the page is styled, it might also be beneficial to remove the overflow:hidden attribute with .css("overflow", "auto") or a similar approach.

Answer 11

Answer №6

<script src="../Scripts/jquery-2.0.1.min.js"></script>
<script type="text/javascript">
        $(document).ready(function () {
            initializePage();
        });

        function initializePage() {
            $('#ulMainMenu li').hide();
            $('#ulMainMenu li.active').show();
        };
</script>


<ul id="ulMainMenu">
    <li><a>Menu item 1</a></li>
    ...
</ul>

Answer 12

<script src="../Scripts/jquery-2.0.1.min.js"></script>
<script type="text/javascript">
        $(document).ready(function () {
            initializePage();
        });

        function initializePage() {
            $('#ulMainMenu li').hide();
            $('#ulMainMenu li.active').show();
        };
</script>


<ul id="ulMainMenu">
    <li><a>Menu item 1</a></li>
    ...
</ul>

Display elements with a particular class using jQuery

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

What's the reason behind the presence of the a tag before the button in this

Tips for vertically centering text within a panel using Bootstrap 3

Arrangement of elements with no space at the top

Expand the table in the initial state by using CSS to collapse the tree

After upgrading from jquery version 2.1 to 3, the custom rules for Knockout Validation are no longer functioning as expected

Personalized information boxes for particular data points within highcharts

How to Determine If a String Represents an HTML Tag Using jQuery

Struggling with aligning mat-icon in the center using HTML and CSS?

Incorporating a loading animation with an AJAX call

Difficulty with selecting the nth-child element within an Ember application

Transform a JQuery function using the each method into vanilla JavaScript

jQuery tooltip plugin - DelayIn not functioning as expected

I can't seem to shake off this constant error. Uncaught TypeError: Unable to access property 'classList' of null

When a value is deleted from an input in jQuery, all other changes become void

Ensure that a synchronous action is performed prior to each Backbone HTTP request

Eliminate the navigation bar background using MaterializeCSS

Implementing a tooltip popup inside the header cell of the ordering table

Trouble activating header checkbox on initial click

Please upload a file using Ajax and jQuery in a WordPress plugin by selecting the file

Tips on preventing the call scroll function from triggering the ajax request when there are no additional records available