Choosing various li classes within a navigation bar

Question

Choosing various li classes within a navigation bar

Struggling to pick the right JQuery elements for my portfolio site. The aim is to show/hide the .inner (Task) items by clicking on the .outer (Category) items, complete with rotating .arrows when the menu expands.

Check out a similar question, along with this jsfiddle.

Kudos to Tats_innit for the initial response.

The HTML looks like this:

<li class="outer" hook="01">
    <div class="arrow"></div>
    Category 1
</li>
<li class="inner" id="menu-01">
    Task 1
</li>
<li class="inner" id="menu-01">
    Task 2
</li>
<li class="inner" id="menu-01">
    Task 3
</li>

<li class="outer" hook="02">
    <div class="arrow"></div>
    Category 2
</li>
<li class="inner" id="menu-02">
    Task 1
</li>
    <li class="inner" id="menu-02">
    Task 2
</li>
    <li class="inner" id="menu-02">
    Task 3
</li>

And here's the jquery code:

$(document).ready(function(){
        $('.outer').click(function(){
            var elem = $('#menu-'+$(this).attr('hook')),
                arrow = $(this).children('.arrow')

            if (!elem.is(':visible'))  {
                arrow.rotate({animateTo:90, duration:128});
            } else {
                arrow.rotate({animateTo:0, duration:128});
            }
            elem.slideToggle('128ms', function() {
            });

        return false;
    });
});

I'm aware that I need to modify

var elem = $('#menu-'+$(this).attr('hook'))

but unsure how to display all instances of .inner. I opted not to nest the .inner elements due to having a hover state background-color: #f1f1f1; for the .outer class.

javascript jquery html css

Answer 1

Answer №1

The approach you have taken to solving this problem needs some adjustment. It is important to address the issues with your current approach before moving on to finding a solution.

Ensure unique use of the id attribute. Having multiple elements with the same id in a single page can cause problems; consider using class instead.
hook is not a recognized HTML attribute; it may be beneficial to standardize it as data-hook for better compatibility and usability. Refer to this resource for more information.
Nesting the .inner within the .outer element is recommended for semantic clarity and accessibility. This organization structure can also help resolve issues such as background hover effects with proper CSS implementation.

By utilizing nesting, you may find that many of the unnecessary ids, classes, and data attributes can be eliminated unless specifically required for other functionalities apart from list display.

Following these adjustments, your updated HTML will resemble the example below:

<ul>
    <li class="outer">
         <div class="arrow"></div>
         Category 1
         <ul>
             <li>
                 Task 1
             </li>
             <li>
                 Task 2
             </li>
             <li>
                 Task 3
             </li>
         </ul>
    </li>
    <li class="outer">
         <div class="arrow"></div>
         Category 1
         <ul>
             <li>
                 Task 1
             </li>
             <li>
                 Task 2
             </li>
             <li>
                 Task 3
             </li>
         </ul>
    </li>
</ul>

For handling interactions with jQuery, apply the following code:

$('.outer').click(function(){
    var elem  = $(this).children('ul'),
        arrow = $(this).children('.arrow')

    if (!elem.is(':visible'))  {
        arrow.rotate({animateTo:90, duration:128});
    } else {
        arrow.rotate({animateTo:0, duration:128});
    }
    elem.slideToggle('128ms', function() {
    });

    return false;
});

To enhance the semantics, consider replacing the .arrow element with a CSS3 pseudo-element applied to the li.outer for a cleaner design and improved functionality.

Edit

If you encounter difficulties implementing the suggestions provided, feel free to refer back to this guidance. A working example demonstrating the proposed changes has been prepared based on the advice shared here. You can view the demonstration by accessing the link below:

Working example

Answer 2

The approach you have taken to solving this problem needs some adjustment. It is important to address the issues with your current approach before moving on to finding a solution.

Ensure unique use of the id attribute. Having multiple elements with the same id in a single page can cause problems; consider using class instead.
hook is not a recognized HTML attribute; it may be beneficial to standardize it as data-hook for better compatibility and usability. Refer to this resource for more information.
Nesting the .inner within the .outer element is recommended for semantic clarity and accessibility. This organization structure can also help resolve issues such as background hover effects with proper CSS implementation.

By utilizing nesting, you may find that many of the unnecessary ids, classes, and data attributes can be eliminated unless specifically required for other functionalities apart from list display.

Following these adjustments, your updated HTML will resemble the example below:

<ul>
    <li class="outer">
         <div class="arrow"></div>
         Category 1
         <ul>
             <li>
                 Task 1
             </li>
             <li>
                 Task 2
             </li>
             <li>
                 Task 3
             </li>
         </ul>
    </li>
    <li class="outer">
         <div class="arrow"></div>
         Category 1
         <ul>
             <li>
                 Task 1
             </li>
             <li>
                 Task 2
             </li>
             <li>
                 Task 3
             </li>
         </ul>
    </li>
</ul>

For handling interactions with jQuery, apply the following code:

$('.outer').click(function(){
    var elem  = $(this).children('ul'),
        arrow = $(this).children('.arrow')

    if (!elem.is(':visible'))  {
        arrow.rotate({animateTo:90, duration:128});
    } else {
        arrow.rotate({animateTo:0, duration:128});
    }
    elem.slideToggle('128ms', function() {
    });

    return false;
});

To enhance the semantics, consider replacing the .arrow element with a CSS3 pseudo-element applied to the li.outer for a cleaner design and improved functionality.

Edit

If you encounter difficulties implementing the suggestions provided, feel free to refer back to this guidance. A working example demonstrating the proposed changes has been prepared based on the advice shared here. You can view the demonstration by accessing the link below:

Working example

Answer 3

Answer №2

If you want to organize a group of elements with the classes outer and inner inside a container div

<div>
    <li class="outer">
        <div class="arrow"></div>
        Category 1
    </li>
    <li class="inner">
        Task 1
    </li>
    <li class="inner">
        Task 2
    </li>
    <li class="inner">
        Task 3
    </li>
</div>

then your javascript code will look like this

$('.outer').click(function(){
    var elem = $(this).siblings('.inner'),
        arrow = $(this).children('.arrow')

    if (!elem.is(':visible'))  {
        arrow.rotate({animateTo:90, duration:128});
    } else {
        arrow.rotate({animateTo:0, duration:128});
    }
    elem.slideToggle('128ms', function() {
    });

    return false;
});

this won't change the background-color of the outer class in the meantime

Answer 4

If you want to organize a group of elements with the classes outer and inner inside a container div

<div>
    <li class="outer">
        <div class="arrow"></div>
        Category 1
    </li>
    <li class="inner">
        Task 1
    </li>
    <li class="inner">
        Task 2
    </li>
    <li class="inner">
        Task 3
    </li>
</div>

then your javascript code will look like this

$('.outer').click(function(){
    var elem = $(this).siblings('.inner'),
        arrow = $(this).children('.arrow')

    if (!elem.is(':visible'))  {
        arrow.rotate({animateTo:90, duration:128});
    } else {
        arrow.rotate({animateTo:0, duration:128});
    }
    elem.slideToggle('128ms', function() {
    });

    return false;
});

this won't change the background-color of the outer class in the meantime

Answer 5

Answer №3

<script>
$(document).ready(function(){
    $('li.inner').hide();
    $('.outer').click(function()
    {
        var elem = $(this).attr('hook');
        $('li.inner').hide();
        $(".menu-"+elem).toggle();
    });
});
</script>
<ul>
<li class="outer" hook="01">
<div class="arrow"></div>
Category 1
</li>
<li class="inner menu-01">
Task 1
</li>
<li class="inner menu-01">
Task 2
</li>
<li class="inner menu-01">
Task 3
</li>

<li class="outer" hook="02">
<div class="arrow"></div>
Category 2
</li>
<li class="inner menu-02">
Task 1
</li>
<li class="inner menu-02">
Task 2
</li>
<li class="inner menu-02">
Task 3
</li>
</ul>

Initially, ensure to modify the li identifiers to classes as two li elements should not share the same ID.

Answer 6

<script>
$(document).ready(function(){
    $('li.inner').hide();
    $('.outer').click(function()
    {
        var elem = $(this).attr('hook');
        $('li.inner').hide();
        $(".menu-"+elem).toggle();
    });
});
</script>
<ul>
<li class="outer" hook="01">
<div class="arrow"></div>
Category 1
</li>
<li class="inner menu-01">
Task 1
</li>
<li class="inner menu-01">
Task 2
</li>
<li class="inner menu-01">
Task 3
</li>

<li class="outer" hook="02">
<div class="arrow"></div>
Category 2
</li>
<li class="inner menu-02">
Task 1
</li>
<li class="inner menu-02">
Task 2
</li>
<li class="inner menu-02">
Task 3
</li>
</ul>

Initially, ensure to modify the li identifiers to classes as two li elements should not share the same ID.

Answer 7

Answer №4

I believe you are searching for the functionality of nextUntil()

$(this).nextUntil('.outer').slideToggle('218ms');

http://jsfiddle.net/bf7Ke/53/

Answer 8

I believe you are searching for the functionality of nextUntil()

$(this).nextUntil('.outer').slideToggle('218ms');

http://jsfiddle.net/bf7Ke/53/

Choosing various li classes within a navigation bar

Answer №1

Edit

Answer №2

Answer №3

Answer №4

Similar questions

Ways to eliminate the final empty space in a grid

Unexpected results are occurring with the margin merging process

utilizing geographical coordinates in a separate function

By utilizing the HTML element ID to retrieve the input value, it is possible that the object in Typescript may be null

Expanding Module Scope to Just the Request (employing Require, Node.js)

Change the behavior of an onclick event on the second click

ng-bind-html is having trouble parsing the HTML correctly and binding it

Using jQuery to define active or hover background images

The package.json file engines field specifying the version with a tilde and then a greater than sign (~>)

Simple Authentication in Node.js with Express Sessions

Vue.js: The Power of Manipulating Strings

Error message in Angular when promises are not defined

NodeJS executor fails to recognize Typescript's CommonJS Internal Modules

Navigating through the CSS menu located in the main directory

Avoid showing duplicate values in the optgroup selection

Is there a way to eliminate the gap between two horizontal rule tags?

HTML and JQuery Image Slide Show

issue with node callback function - code malfunctioning

Encountering a DiscordAPIError[10062] when attempting to retrieve user points from the database due to an unknown interaction

React Material Design Cards for Responsive Layouts