CODEWITHSUNDEEP
javascriptjqueryhtml
Sukrams
Sukrams

Reputation: 127

Handle two slideUp/Down via classes

i've two menus in mobile view of my website. If you click on the hamburger bar, they should slide down/up. This is basically no problem for me.

My HTML looks like this:

...
<div class="foo">
  <div class="trigger menu1">
    ..
  </div>
  <div class="trigger menu2">
    ...
  </div>
</div>
...
<nav id="main-navi">
  ...
</nav>
<ul id="info-navi>
  ...    
</ul>
...

At the moment I solved it via jQuery with click-events for every single trigger. Like this...

...
$(".trigger.menu1").click(function() {
  ...
  $("#main-navi").slideDown();
});
$(".trigger.menu2").click(function() {
  ...
  $("#info-navi").slideDown();
  ...
});
...

This works fine, but I want to use it more easier and without so much code. Isn't it possible to get just an event for the .trigger and refer it just to the class to trigger the menu to slide down?

I tried it with something like, but it doesn't work:

if ($this.hasClass("menu1")) {
  $("#main-navi").slideDown();
} else {
  $("#info-navi").slideDown();
}

Is there a way to get this working?

Regards, Markus

Upvotes: 0

Views: 69

Answers (5)

Mohammad Usman
Mohammad Usman

Reputation: 39362

You can use HTML5 data-* attribute to achieve this:

$(function() {
  $('.trigger').click(function(e) {
    e.preventDefault();
    
    $('#' + $(this).attr('data-target')).slideToggle();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="foo">
  <div data-target="main-navi" class="trigger">
    Menu Opener 1
  </div>
  <div data-target="info-navi" class="trigger">
    Menu Opener 2
  </div>
</div>
...
<nav id="main-navi">
  Menu Slide 1
</nav>
<ul id="info-navi">
  Menu Slide 2
</ul>

Upvotes: 2

Bogdan Moisin
Bogdan Moisin

Reputation: 29

Why don't you use slideToggle() jquery function ? You can find help here http://api.jquery.com/slidetoggle/ .

Upvotes: 0

Samir
Samir

Reputation: 1368

This might help you,

var clickedItem = $(".foo").find('div');

clickedItem.click(function(e){
    e.prventDefault();
    if($(this).hasClass('menu1')){
        $("#main-navi").slideDown();
    }else{
        $("#info-navi").slideDown();
    }
});

Upvotes: 0

Thilak Rao
Thilak Rao

Reputation: 1932

You are heading in the right direction, but you had a small syntax error in your code. Try this: 

$('.trigger').on('click', function(){
    var isMenu1 = $(this).hasClass('menu1');
    if(isMenu1){
        $("#main-navi").slideDown();
    } else {
        $("#info-navi").slideDown();
    }
});

$this is incorrect, should have been $(this)

Upvotes: 0

Mohit Bhardwaj
Mohit Bhardwaj

Reputation: 10093

You already have solved your problem. Though there are other possible solutions to this, but this code works quite well for your purpose:

$(".trigger").on("click", function(e){
  e.preventDefault();

  if ($this.hasClass("menu1")) {
    $("#main-navi").slideDown();
  } else {
    $("#info-navi").slideDown();
  }
});//.trigger click

Upvotes: 2

Related Questions