CODEWITHSUNDEEP
jquerycss
Steven de Jong
Steven de Jong

Reputation: 69

if section has class hide nav, when class no longer exists show nav

I have on my website a number of sections, in some sections the navigation should be hidden but not in all sections.

I have this code:

if (!$('section').hasClass("active")) {
    $('nav').addClass('visible');
} else {
    $('nav').removeClass('visible');
}

I have already tried this but did not work:

if (!$('section').hasClass("active")) {
    $('nav').show();
} else {
    $('nav').hide();
}

The section getting an active class when the viewport is on the section and this works.

HTML pastebin: http://pastebin.com/CrEpvDEZ
SCSS pastebin: http://pastebin.com/db3txwRX

Live version: http://staging.madebysteven.nl/

Upvotes: 0

Views: 132

Answers (1)

m.casey
m.casey

Reputation: 2599

If I understand the question correctly, you wish to hide the nav when a section has the active class:

This should work given you pasted HTML and CSS:

$(function () {
    // set visible equal to whether or not a section with the active class exists
    function toggleNav() {
        $('nav').toggle($('section.active.begin').length + $('section.active.about').length == 0);
    }


    // when a section is changed...
    $('section').on('change', function() {
        // re-run the toggle function to determine whether or not to show the nav
        toggleNav();
    });

    // set initial visibility state
    toggleNav();
});

Upvotes: 1

Related Questions