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

Identifying the precise image dimensions required by the browser

Adjust the checkmark color of MUI Checkbox

Switch up the placement of articles, going back and forth between left

Combining plugin setups and functionalities into a unified script

Prevent clicking here

Convert TypeScript model to JSON while excluding properties with null values

Is it considered acceptable to utilize a v-model's value as the basis for an if-statement?

Mysterious obsidian container lurking in the background of the video on Chrome version 67.0.3396

Challenges with implementing JSONP in jQuery autocomplete feature

refresh the page and submit a post to his own profile

Maintaining aspect ratio while resizing images: A foolproof guide

Is there a way to have my MUI Typography component display a unique image cursor when hovered over?

Adjusting the Connection header in a jQuery ajax request

Selecting attribute using a variable in jQuery is a common practice in

How to make browsers refresh cached images

IE8 is incompatible with Jquery

What are some best practices for implementing responsive design using CSS @media queries with makeStyles in React.js Material UI?

Is it possible to include two of these on a single page with unique variables? (Using JQuery)

Adjust the size and color of text in Chart.js using Angular 5

What causes the variation in the appearance of the navigation bar across different pages?