Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Ashley Wile
Ashley Wile
8,452 Points

Hide/Show for mobile navigation

Hello! I am a newbie with Javascript. For my desktop navigation I have created a drop down menu by nesting a <ul> inside a <ul>. For mobile I do not desire a drop down list but to have the initial <ul> hide when clicked and the secondary <ul> to appear if exists. I can get the initial to hide and show but when the primary is clicked I cannot get it to show the secondary. Any feedback would be appreciated. Is this even possible?

Ashley Wile
Ashley Wile
8,452 Points

An unordered list inside an unordered list.

Jacob Mishkin
Jacob Mishkin
23,118 Points

Can you please post the JS that you hare having trouble with.

Ashley Wile
Ashley Wile
8,452 Points 
$(".main-nav-items").click(function() {
    $(".main-nav-items").hide();
    $(".secondary-nav-items").show("slow");
});
Ashley Wile
Ashley Wile
8,452 Points 
<nav>       
    <ul class="main-nav">                           
        <li class="main-nav-items dropdown"><a href="#">Services</a>
            <ul class="drop-nav extra">
                <li class="flyout secondary-nav-items"><a href="emergency.php">Emergency</a></li>
                <li class="flyout secondary-nav-items"><a href="plumbing.php">Plumbing</a></li>
                <li class="flyout secondary-nav-items"><a href="heating.php">Heating</a></li>
                <li class="flyout multiple secondary-nav-items"><a href="ventilation-info.php">Ventilation</a>
                    <ul class="flyout-nav">
                        <li class="flyout"><a href="ventilation-info.php">Info</a></li>
                        <li class="flyout"><a href="#">Venmar</a></li>                          
                    </ul></li>
                <li class="flyout multiple"><a href="#">Heat Pumps</a>
                    <ul class="flyout-nav">
                        <li class="flyout"><a href="mitsubishi-info.php">Info</a></li>
                        <li class="flyout"><a href="hp-application.php">Application Form</a></li>
                        <li class="flyout"><a href="maintain-pkg.php">Maintainence Package</a></li>
                            <li class="flyout"><a href="#">Mitsubishi</a></li>                          
                    </ul></li>
            </ul>
        </li>               
        <li class="main-nav-items dropdown"><a href="#">Products</a>
            <ul class="drop-nav extra">
                <li class="flyout multiple"><a href="#">Mitsubishi</a>
                    <ul class="flyout-nav">
                        <li class="flyout"><a href="mitsubishi-info.php">Info</a></li>
                        <li class="flyout"><a href="#</a></li>                                                              
                    </ul>
                </li>
                <li class="flyout multiple"><a href="#">Venmar</a>
                    <ul class="flyout-nav">
                        <li class="flyout"><a href="ventilation-info.php">Info</a></li>
                        <li class="flyout"><a href="http://www.venmar.ca/">Venmar Products</a></li>                                                                 
                    </ul>
                </li>
                <li class="flyout multiple"><a href="#">Water Heaters</a>
                    <ul class="flyout-nav">
                        <li class="flyout"><a href="water-heaters.php">Info</a></li>
                        <li class="flyout"><a href="waterheater-product.php">Products</a></li>                          
                    </ul>
                </li>
                <li class="flyout multiple"><a href="#">Fixtures</a>
                    <ul class="flyout-nav">
                        <li class="flyout"><a href="fixtures-info.php">Info</a></li>
                        <li class="flyout"><a href="fixtures-products.php">Products</a></li>                            
                    </ul>
                </li>
            </ul>
        </li>               
        <li class="main-nav-items dropdown"><a href="#">Contractors</a>
            <ul class="drop-nav extra">
                <li class="flyout"><a href="quote-form.php">Quote Form</a></li>
                <li class="flyout"><a href="#">Heat Pump Phamplet</a></li>
            </ul>
        </li>
        <li class="main-nav-items"><a href="self-storage.php">Self Storage</a></li>
        <li class="main-nav-items"><a href="contact.php">Contact</a></li>
        <li class="main-nav-items"><a class="face" href="#"><img src="img/facebook.png" alt="Facebook"></a></li>                
    </ul>           
</nav>
Jacob Mishkin
Jacob Mishkin
23,118 Points

I'm not sure what you are asking. Are you asking to have the main OL hidden then have the Nested OL be shown on click? is that right?

1 Answer

Jacob Mishkin
Jacob Mishkin
23,118 Points

I also found this on stack overflow. if you wan you can use it as a template to help you.

http://stackoverflow.com/questions/24318917/how-to-show-hide-element-previce-element-and-show-one-nested-ul

the HTML:

<ul>
    <li class="subject">List item 1 with subitems:
        <ul id="item">
            <li>Subitem 1</li>
            <li>Subitem 2</li>
        </ul>
    </li>
    <li class="subject">List item 2 with subitems:
        <ul id="item">
            <li>Subitem 1</li>
            <li>Subitem 2</li>
        </ul>
    </li>
    <li class="subject">List item 3 with subitems:
        <ul id="item">
            <li>Subitem 1</li>
            <li>Subitem 2</li>
        </ul>
    </li>
</ul>

The CSS:

#item {
    display: none;
}

The JS:

$(".subject").click(function () {
    $(this).find("#item").slideToggle("slow")
    .end().siblings().children('ul').slideUp();
});

I hope this helps. throw this code in codepen and see how it works I think this is what you are looking for,.

Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

Edited to make it an answer, not a comment.

Ashley Wile
Ashley Wile
8,452 Points

Thank you so much for taking your time to help! I still need to make some adjustments but well on my way.

Jacob Mishkin
Jacob Mishkin
23,118 Points

Not a problem!