0

I am trying to make a responsive menu. Once this menu expands, the div with the class of container will shrink to make room for this menu. As of right now, the menu will open but it does not close once one of the buttons are clicked again. Is there any jQuery selector to make it so when any where outside of this menu is clicked, or when one of the "-btn" classes are clicked the container div will go back to it's original size?

HTML

<nav>
    <a href="#" id="company-information-btn">
        <i class="fa fa-info-circle"></i>
        <p>Company Information</p>
    </a>
    <hr>
    <a href="#" id="faq-btn">
        <i class="fa fa-question-circle"></i>
        <p>FAQ</p>
    </a>
    <hr>
    <a href="#" id="personalize-btn">
        <i class="fa fa-magic"></i>
        <p>Personalize</p>
    </a>
    <hr>
    <a href="#" id="services-btn">
        <i class="fa fa-gift"></i>
        <p>Services</p>
    </a>
    <hr>
    <a href="#" id="portfolio-btn">
      <i class="fa fa-desktop"></i>
      <p>Portfolio</p>
    </a>
    <hr>
    <a href="#" id="contact-btn">
      <i class="fa fa-envelope-o"></i>
      <p>Contact Information</p>
    </a>
    <hr>
    <a href="#" id="testimonials-btn">
      <i class="fa fa-users"></i>
      <p>Testimonials</p>
    </a>
</nav>

<div class="content" id="company-information>
...
</div>

<div class="content" id="FAQ">
...
</div>

etc...

jQuery

$('.profile-create_nav nav a').click(function(event) {
    event.preventDefault();

    // $('.profile-create_nav nav a').removeClass('active');
    // $(this).addClass('active');
    $('.container').addClass('smaller');
    $('.profile-create_nav .content').fadeToggle(300);
    $('.profile-create_nav #services').show();
    $('.move_down').hide();
});


//Aside nav for microsite
$('#company-information-btn').click(function() {
    $('.content').addClass('hidden');
    $('#company-information').removeClass('hidden');
    $('.profile-create_nav nav a').removeClass('active');
    $('#company-information-btn').addClass('active');
});

$('#personalize-btn, #personalize-section-btn').click(function() {
    $('.content').addClass('hidden');
    $('#personalize').removeClass('hidden');
    $('.profile-create_nav nav a').removeClass('active');
    $('#personalize-btn').addClass('active');
});

$('#faq-btn, #faq-section-btn').click(function() {
    $('.content').addClass('hidden');
    $('#faq-section').removeClass('hidden');
    $('.profile-create_nav nav a').removeClass('active');
    $('#faq-btn').addClass('active');
});

$('#services-btn, #services-section-btn').click(function() {
    $('.content').addClass('hidden');
    $('#services').removeClass('hidden');
    $('.profile-create_nav nav a').removeClass('active');
    $('#services-btn').addClass('active');
});

$('#portfolio-btn, #portfolio-section-btn').click(function() {
    $('.content').addClass('hidden');
    $('#portfolio-section').removeClass('hidden');
    $('.profile-create_nav nav a').removeClass('active');
    $('#portfolio-btn').addClass('active');
});

$('#testimonials-btn, #testimonials-section-btn').click(function() {
    $('.content').addClass('hidden');
    $('#testimonials-section').removeClass('hidden');
    $('.profile-create_nav nav a').removeClass('active');
    $('#testimonials-btn').addClass('active');
});

$('#contact-btn, #contact-section-btn').click(function() {
    $('.content').addClass('hidden');
    $('#contact-information').removeClass('hidden');
    $('.profile-create_nav nav a').removeClass('active');
    $('#contact-btn').addClass('active');
});

Thanks, Adam.

  • try $(document).click. And "return false;" at the end of each function where you don't want the event to bubble up to the document. – Vincent McNabb Jan 23 '15 at 03:11
  • @VincentMcNabb I can see how this would work, but in this case, if a user clicks on the menu I do not want the menu to hide. Is there a way to make it so anywhere in the document, other than this specific menu will hide on click? Would this be formatted as if $(document).click { return false; } else { // other code here } ?? Thanks! –  Jan 23 '15 at 08:27
  • In the click events for the menu, return false, so the event doesn't bubble up to the document click event which closes the menu. – Vincent McNabb Jan 23 '15 at 09:27

0 Answers0