Opening and closing active items

Question

I'm trying to have the 3 buttons to each open its own list below whilst closing any current active lists open. I've tried my best with the jQuery, but it seems so bloated. Is there a way to streamline this jQuery code?

At the moment I have a very rough working example.

/*********************** 
Mobile Menus
*********************************/

(function() {
   var nav = $('.social_icons_list ul');
    $.fn.navtoggle = function(speed) {
         var $this = $(this);

        return $this.animate({
            'height': 'toggle'
        }, 500);
    }

    $('.socialNav').on('click', function() {
        nav.stop(true, true).navtoggle(300);
        $("ul").not(nav).hide();
        e.preventDefault();
    });
})();   




(function() {
   var nav = $('.dogz_list ul');
    $.fn.navtoggle = function(speed) {
         var $this = $(this);

        return $this.animate({
            'height': 'toggle'
        }, 500);
    }

    $('.dogzNav').on('click', function() {
        nav.stop(true, true).navtoggle(300);
        $("ul").not(nav).hide();
        e.preventDefault();
    });
})();   



 (function() {
   var nav = $('.navigation_list ul');
    $.fn.navtoggle = function(speed) {
         var $this = $(this);

        return $this.animate({
            'height': 'toggle'
        }, 500);
    }

    $('.Nav').on('click', function() {
        nav.stop(true, true).navtoggle(300);
        $("ul").not(nav).hide();
        e.preventDefault();
    });
})();

Well it would be shorter if you didn't define $.fn.navtoggle three times - the second and third will overwrite the first, they're not restricted to the scope of the anonymous functions around them. Also, within your navtoggle function this will already be a jQuery object, so no need for your $this = $(this). (Also, by the way, you never use the speed parameter.) — nnnnnn, Commented Jun 23, 2015 at 14:17
I have also answered your question on another thread of yours. Take a look. — lshettyl, Commented Jun 23, 2015 at 16:10

Richard Parnaby-King · Accepted Answer · 2015-06-23 15:01:14Z

I strongly recommend refactoring your HTML. At the moment it works, and I have based a solution around your HTML, however I strongly recommend changing it into nested ul tags to make it easier to manipulate with jquery e.g.

<ul>
  <li>Item a
    <ul>
      <li>Sub item</li>
      <li>Another sub-item</li>
    </ul>
  </li>
</ul>

That said:

I have removed display: none from your UL and am using JS to hide the nav divs on page load (this can be moved to the css, but this is just proof of concept).

The javascript has paired the class of the a tag to the class of the nav div in the path variable.

When the user clicks on the nav link, all nav divs are hidden and the corresponding nav div for the clicked link is animated open.

var path = {
  'socialNav':'social_icons_list',
  'dogzNav':'dogz_list',
  'Nav':'navigation_list',
};

var navDivs = $('.social_icons_list,.dogz_list,.navigation_list');

$(document).on('ready', function(){
  navDivs.hide();
  $('a.socialNav, a.dogzNav, a.Nav').on('click', function(){
    navDivs.hide();
    navDivs.filter('.' + path[$(this).attr('class')]).slideDown(500);
  });
});

body {
  background: #ccc;
  font-family: 'proxima_nova_rgregular';
  color: #524a45;
}
.header {
  height: 129px;
  border-bottom: 1px solid #666;
}
.header .container {
  padding: 0;
}
/*social_icons desktop version*/
.social_icons {
  float: left;
  margin-top: 25px;
  width: 90%;
}
.social_icons .twitter {
  float: left;
  width: 24px;
  height: 50px;
  display: block;
  margin: 0 32px 0 0;
  background: url(../img/logos_icons/twitter.svg) no-repeat 0 center;
}
.social_icons .twitter:hover {
  background: url(../img/logos_icons/twitter_hover.svg) no-repeat 0 center;
  cursor: pointer;
}
.social_icons .facebook {
  float: left;
  width: 24px;
  height: 50px;
  display: block;
  margin: 0 32px 0 0;
  background: url(../img/logos_icons/fb.svg) no-repeat 0 center;
}
.social_icons .facebook:hover {
  background: url(../img/logos_icons/fb_hover.svg) no-repeat 0 center;
  cursor: pointer;
}
.social_icons .pinterest {
  float: left;
  width: 24px;
  height: 50px;
  display: block;
  margin: 0 32px 0 0;
  background: url(../img/logos_icons/pin.svg) no-repeat 0 center;
}
.social_icons .pinterest:hover {
  background: url(../img/logos_icons/pin_hover.svg) no-repeat 0 center;
  cursor: pointer;
}
.social_icons .instagram {
  float: left;
  width: 24px;
  height: 50px;
  display: block;
  margin: 0 32px 0 0;
  background: url(../img/logos_icons/insta.svg) no-repeat 0 center;
}
.social_icons .instagram:hover {
  background: url(../img/logos_icons/insta_hover.svg) no-repeat 0 center;
  cursor: pointer;
}
.logo {
  position: absolute;
  float: left;
  background: url(../img/logos_icons/logo_mobile.svg) no-repeat center center;
  width: 100%;
  height: 115px;
  display: block;
  margin-top: 10px;
}
.hold {
  float: left;
  width: 100%;
  margin-top: 25px;
  display: none;
}
.bag {
  float: right;
  width: 47px;
  height: 36px;
  background: #fff url(../img/logos_icons/bag.svg) no-repeat 7px center;
  border-radius: 5px;
  border: 1px solid #c6c6c5;
  padding: 7px;
  text-align: right;
}
.nav {
  margin: 0;
  float: left;
  width: 100%;
}
.navbar-nav > li {
  float: none;
  margin: 0;
}
.navbar-inverse .navbar-nav > li > a {
  color: #524a45;
  text-transform: uppercase;
  font-family: 'proxima_nova_rgregular';
  letter-spacing: 1.5px;
  padding: 15px 15px;
}
.dropdown-menu > li > a {
  color: #524a45;
  text-transform: uppercase;
  font-family: 'proxima_nova_rgregular';
  letter-spacing: 1.5px;
  clear: both;
  color: #333;
  display: block;
  font-weight: normal;
  line-height: 1.42857;
  padding: 20px 20px;
  white-space: nowrap;
}
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
  color: #524a45;
  background-color: #fff;
}
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
  color: #524a45;
  /*border-bottom:1px solid #524a45;*/
  background: #524a45;
  color: #fff;
}
.dropdown-menu {
  padding: 0;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  background-color: #efefee;
}
.navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus {
  background-color: transparent;
  color: #524a45;
}
.navbar {
  background: #fff;
  min-height: 178px;
}
.navbar-header {
  float: none;
  background: #fff;
}
.navbar-collapse.collapse {} .navbar.shrink {
  min-height: 135px;
}
.navbar.shrink * {
  transition: 1s;
}
.navbar.shrink .header {
  height: 85px;
}
.navbar.shrink .logo {
  background: url(../img/logos_icons/logo_small.svg) no-repeat top 10px center;
  margin: 0
}
.navbar.shrink .navbar-brand {
  font-size: 25px;
}
.navbar-toggle {
  display: block;
}
.nav > li {
  display: block;
  position: relative;
}
.navbar-inverse .navbar-collapse,
.navbar-inverse .navbar-form {
  border: none;
}
.navbar-collapse {
  padding: 0;
}
.navbar-inverse .navbar-toggle {
  border-color: #c6c6c5;
  border-radius: 5px;
}
.navbar-inverse .navbar-toggle:hover,
.navbar-inverse .navbar-toggle:focus {
  background-color: #524a45;
}
.navbar-inverse .navbar-toggle:hover .icon-bar {
  background-color: #fff;
}
/* button mobile social_icons */
.navbar-header > .social_icons {
  display: block;
  margin: 10px;
  width: 20%;
}
.navbar > .social_icons_list ul {
  padding: 0;
  margin-top: 10px;
  width: 100%;
  background: #eee;
  float: left;
}
.navbar > .social_icons_list ul li {
  display: block;
  float: none;
  height: 50px;
  width: 100%;
}
.navbar-header > .social_icons a.socialNav {
  display: block;
  background: url(../img/logos_icons/mobile_social_icon.svg) no-repeat center center;
  width: 47px;
  height: 36px;
  border-radius: 5px;
  border: 1px solid #c6c6c5;
}
.navbar-header > .social_icons a.socialNav:hover {
  background: #524a45 url(../img/logos_icons/mobile_social_icon_hover.svg) no-repeat center center;
  width: 47px;
  height: 36px;
  border-radius: 5px;
  border: 1px solid #c6c6c5;
}
.social_icons_list ul li a {
  padding-left: 50px;
  display: block;
  height: 50px;
  padding-left: 50px;
  line-height: 50px;
  color: #524a45;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}
.social_icons_list .twitter {
  background: url(../img/logos_icons/twitter.svg) no-repeat 10px center;
}
.social_icons_list .twitter:hover {
  color: #fff;
  background: #524a45 url(../img/logos_icons/twitter_hover.svg) no-repeat 10px center;
  cursor: pointer;
}
.social_icons_list .facebook {
  background: url(../img/logos_icons/fb.svg) no-repeat 10px center;
}
.social_icons_list .facebook:hover {
  color: #fff;
  background: #524a45 url(../img/logos_icons/fb_hover.svg) no-repeat 10px center;
  cursor: pointer;
}
.social_icons_list .pinterest {
  background: url(../img/logos_icons/pin.svg) no-repeat 10px center;
}
.social_icons_list .pinterest:hover {
  color: #fff;
  background: #524a45 url(../img/logos_icons/pin_hover.svg) no-repeat 10px center;
  cursor: pointer;
}
.social_icons_list .instagram {
  background: url(../img/logos_icons/insta.svg) no-repeat 10px center;
}
.social_icons_list .instagram:hover {
  color: #fff;
  background: #524a45 url(../img/logos_icons/insta_hover.svg) no-repeat 10px center;
  cursor: pointer;
  float: left;
}
/* button mobile dogz */
.navbar-header > .dogz {
  display: block;
  margin: 10px;
  width: 20%;
  float: left;
}
.navbar > .dogz_list {
  display: block;
  width: 100%;
  float: left;
}
.navbar > .dogz_list ul {
  padding: 0;
  margin-top: 10px;
  width: 100%;
  background: #eee;
}
.navbar > .dogz_list ul ul {
  padding: 0 0 0 20px;
  margin: 0;
}
.navbar > .dogz_list ul li {
  display: block;
  float: none;
  width: 100%;
}
.navbar > .dogz_list ul li > a {
  color: #524a45;
  text-transform: uppercase;
  font-family: 'proxima_nova_rgregular';
  letter-spacing: 1.5px;
  clear: both;
  color: #333;
  display: block;
  font-weight: normal;
  line-height: 1.42857;
  padding: 15px;
  white-space: nowrap;
}
.navbar > .dogz_list ul li > a:hover {
  color: #fff;
  background: #524a45;
}
.navbar-header > .dogz a.dogzNav {
  display: block;
  background: url(../img/logos_icons/paw.svg) no-repeat center center;
  width: 47px;
  height: 36px;
  border-radius: 5px;
  border: 1px solid #c6c6c5;
}
.navbar-header > .dogz a.dogzNav:hover {
  background: #524a45 url(../img/logos_icons/paw_hover.svg) no-repeat center center;
  width: 47px;
  height: 36px;
  border-radius: 5px;
  border: 1px solid #c6c6c5;
}
.navbar-header > .hold {
  float: left;
  margin-top: 10px;
  width: 20%;
  display: block;
}
.navbar-header > .dogz a.Nav {
  display: block;
  background: url(../img/logos_icons/paw.svg) no-repeat center center;
  width: 47px;
  height: 36px;
  border-radius: 5px;
  border: 1px solid #c6c6c5;
}
.navbar-header > .dogz a.Nav:hover {
  background: #524a45 url(../img/logos_icons/paw_hover.svg) no-repeat center center;
  width: 47px;
  height: 36px;
  border-radius: 5px;
  border: 1px solid #c6c6c5;
}
.navbar > .navigation_list {
  display: block;
  width: 100%;
  float: left;
}
.navbar > .navigation_list ul {
  padding: 0;
  margin-top: 10px;
  width: 100%;
  background: #eee;
}
.navbar > .navigation_list ul li ul {
  display: none;
}
.navbar > .navigation_list ul li ul li a {
  color: #ccc;
}
.navbar > .navigation_list ul ul {
  padding: 0;
  margin: 0;
}
.navbar > .navigation_list ul li {
  display: block;
  float: none;
  width: 100%;
}
.navbar > .navigation_list ul li > a {
  color: #524a45;
  text-transform: uppercase;
  font-family: 'proxima_nova_rgregular';
  letter-spacing: 1.5px;
  clear: both;
  color: #333;
  display: block;
  font-weight: normal;
  line-height: 1.42857;
  padding: 15px;
  white-space: nowrap;
}
.navbar > .navigation_list ul li > a:hover {
  color: #fff;
  background: #524a45;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="header">
    <div class="container">
      <div class="social_icons">
        <a href="#" class="twitter"></a>
        <a href="#" class="facebook"></a>
        <a href="#" class="pinterest"></a>
        <a href="#" class="instagram"></a>
      </div>

      <div class="logo"></div>

      <div class="hold"><a href="#" class="bag">0</a>
      </div>
    </div>
  </div>

  <div class="navbar-header">

    <div class="social_icons">
      <a href="#" class="socialNav">social</a>
    </div>

    <div class="dogz">
      <a href="#" class="dogzNav">dognav</a>
    </div>


    <div class="dogz">
      <a href="#" class="Nav">nav</a>
    </div>
  </div>

  <div class="navigation_list">
    <ul>
      <li><a href="#">About <span class="caret"></span></a>
        <ul>
          <li><a href="#">FAQ's</a>
          </li>
          <li><a href="#">Gifting</a>
          </li>
        </ul>
      </li>
      <li><a href="#">Her </a>
        <ul>
          <li><a href="#">Product 1</a>
          </li>
          <li><a href="#">Product 2</a>
          </li>
          <li><a href="#">Product 3</a>
          </li>
        </ul>
      </li>
      <li><a href="#">His </a>
        <ul>
          <li><a href="#">Product 1</a>
          </li>
          <li><a href="#">Product 2</a>
          </li>
          <li><a href="#">Product 3</a>
          </li>
        </ul>
      </li>
      <li><a href="#">Our Craft</a>
      </li>
      <li><a href="#">Blog</a>
      </li>
      <li><a href="#">Contact</a>
      </li>
    </ul>
  </div>


  <div class="social_icons_list">
    <ul>
      <li><a href="#" class="twitter">Tweet  </a>
      </li>
      <li><a href="#" class="facebook">Like  </a>
      </li>
      <li><a href="#" class="pinterest">Pin  </a>
      </li>
      <li><a href="#" class="instagram">Share  </a>
      </li>
    </ul>
  </div>

  <div class="dogz_list">
    <ul>
      <li><a href="#">Her </a>
      </li>
      <li><a href="#">His </a>
      </li>
    </ul>
  </div>


</div>

Thanks for your code Richard. It works in the snippet - but ive amended my jsfiddle and its not working correctly as you say. jsfiddle.net/vakwdLre/1 — karen Hunter, Commented Jun 23, 2015 at 15:29
You had set the options on the left to trigger the jquery on onLoad, then was listening to the jquery for onLoad AGAIN. Take out $('document').on('ready',... - jsfiddle.net/vakwdLre/2 — Richard Parnaby-King, Commented Jun 23, 2015 at 15:40

Stack Exchange Network

Opening and closing active items

1 Answer 1

Your Answer

Not the answer you're looking for? Browse other questions tagged
javascript
jquery
or ask your own question.

Linked

Hot Network Questions

Opening and closing active items

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Not the answer you're looking for? Browse other questions tagged javascriptjquery or ask your own question.

Linked

Related

Hot Network Questions

Not the answer you're looking for? Browse other questions tagged
javascript
jquery
or ask your own question.