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

Here's a guide on customizing the appearance of the date picker in NativeBase components for React Native by

Attempting to transfer information from a JSON file to a Netflix-inspired platform

Are there any plugins available for creating a progress bar using jQuery?

What is the reason behind Chrome Dev Tools not automatically adding the parentheses when a method is selected?

Tap on the child to reveal their parent

Using jquery to transition an image to fade out and then reappear in a different position

What is the best way to modify JSON data within a file?

Guidelines on executing a function after page load in meteor

Steps to retrieve the latest value of a specific cell within the Material UI Data Grid

Perform DOM manipulation prior to triggering the AJAX event to prevent CSRF Error

What is the process for altering an SVG image following a click event in Javascript?

Tips on automatically focusing on an input within a Semantic UI React dropdown

Ways to release a client-side script with npm?

Assistance with utilizing the jQuery .html() function

What is the best approach to updating multiple rows instead of just the first row using the update button located on both sides using PHP and AJAX?

How to Eliminate Image Flickering While Loading in a React Component

What are some strategies for accessing the original values of form components that have not been altered when using ngModel?

Creating a render function that includes the img.src parameter requires careful thought and consideration

Is there a way to use JavaScript to import several custom fonts at once?

"Implementing a click event handler on a button within an iframe