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

Kent Hefley
Kent Hefley
11,217 Points
Posted by Kent Hefley
Kent Hefley
11,217 Points

classList.toggle Not Working after adding new Jquery feature

Hello

I am building a single page website. For smaller screen sizes I am using a hamburger icon and toggling the height of the .navigation from 0 to 125px using javascript. I have the .navigation height set to zero then toggle the class .open with a height of 125px

document.querySelector(".hamburger").addEventListener('click', function(e){
    e.preventDefault();
    document.querySelector('.navigation').classList.toggle('open');

});

Here is the css class.

.navigation {
    height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    margin: auto;
    transition: height .3s linear;
    }

.open   {
    height: 125px;
}

Here is the html for the navigation:

<header>

            <nav>
                <div class="logo">
                    <img src="img/logo.png" alt="" class="logo">
                </div>

                <div class="hamburger">
                <div class="line"></div>
                <div class="line"></div>
                <div class="line"></div>
                </div>


                <div class="navigation">
                    <ul><a class="slide-section" href="#story">Our Story</a></ul>
                    <ul><a class="slide-section" href="#technology">Technology</a></ul>
                    <ul><a class="slide-section" href="#cycle">The Cycle</a></ul>
                    <ul><a class="slide-section" href="#contact">Contact Us</a></ul>
                </div>

                </nav>
        </header>

Everything was working perfectly until I added a jquery scroll feature that scrolls to a specific section of the page when you click a .navigation link. 

var headerHeight = $('nav').outerHeight();

$(document).ready(function() {
    $('.slide-section').click(function(e) {
        var linkHref = $(this).attr('href');


        $('html, body').animate({
            scrollTop: $(linkHref).offset().top - headerHeight
        }, 1000);


        e.preventDefault();


    });

});

When I am in mobile view, click the hamburger to open(toggle height)the navigation, then click on a nav link, the toggle no longer works and the .navigation stays at 125px. The scroll works but you have to click on the hamburger again to close the navigation.

What do I need to add to make the navigation close(toggle class) when I click on a nav link in mobile view?

2 Answers

Steven Parker
Steven Parker
231,271 Points
Steven Parker
Steven Parker
231,271 Points

I don't see any media queries or anything else that would define "mobile view" or explain what makes it operate differently.

But to make the navigation close when an item is selected, you could add this to the click handler for ".slide-selection":

  document.querySelector(".navigation").classList.remove("open");

Also, it's not valid HTML to have anchor (a) elements enclosed in unordered lists (ul). Did you perhaps intended to have them as list items inside a single unordered list?

    <ul class="navigation">
        <li><a class="slide-section" href="#story">Our Story</a></li>
        <li><a class="slide-section" href="#technology">Technology</a></li>
        <li><a class="slide-section" href="#cycle">The Cycle</a></li>
        <li><a class="slide-section" href="#contact">Contact Us</a></li>
    </ul>
Kent Hefley
Kent Hefley
11,217 Points
Kent Hefley
Kent Hefley
11,217 Points

Thank you Steven. That solution worked, but since I left out my media query width, that solution wouldn't keep it from happening when the viewport was wider. This click event only needed to work when the viewport was 584px or less. I was just about to answer because I found a different solution that also works. However, your example uses less code, so I am going to play with it. I'll go ahead and post what I did so you can see it. I created a new click handler.

$(".slide-section").on('click', function(e){
    e.preventDefault();

    if ($(window).width() < 584) {
    $('.navigation').toggleClass('open');
        }

});

Could you post an example of how I could have written my navigation better?

Thank you.

Steven Parker
Steven Parker
231,271 Points
Steven Parker
Steven Parker
231,271 Points

The example with the revised navigation HTML is part of my original answer.

Happy coding!

Kent Hefley
Kent Hefley
11,217 Points
Kent Hefley
Kent Hefley
11,217 Points

Thanks Steven. I see what you were referring to. That was an error and has been fixed.