CODEWITHSUNDEEP
javascriptjqueryhtmlcsshamburger-menu
Hil
Hil

Reputation: 429

How to make a button function as both open and close?

I want to apply a close state to the same hamburger button with an open state already applied. Close state is already applied to another button at a different location.. but I don't want to change that. I just want to duplicate the close state on the open button

</script>
<script type='text/javascript'>
$(function() {  
    $('.menu').click(function () {
    $('#css-menu').css({right:'0'});
});
    $('.close-menu').click(function() {
    $('#css-menu').css({right:'-340px'});
});
 });
</script>

<li class='menu' title='Menu'></li>

Would appreciate if any help

Thanks in advance...

Upvotes: 1

Views: 3973

Answers (4)

Reuben Gomes
Reuben Gomes

Reputation: 878

Create 2 classes where one is your shown state the other is hidden state Define the CSS for your classes

#css-menu.hidden {
  right: -340px;
}
#css-menu.shown {
  right: 0;
}

Assuming class shown = shown.
And class hidden=hidden

Add the shown(default) class your element Class= 'hidden'

Then your script



  $('.menu').click(function(){
    $('#css-menu').toggleClass('shown hidden');
    });

Upvotes: 0

Pugazh
Pugazh

Reputation: 9561

Here is an example for toggleClass. Clicking on the specific <li> will toggle the state of that <li> only.

Use this.toggleClass() to reference the element being clicked.

$(function() {
  $('.menu').click(function() {
    $(this).toggleClass('open');
  });
});
li ul {
  display: none;
}
li.open ul {
  display: block;
}
li:hover {
  cursor: pointer;
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="menu">Menu 1
    <ul>
      <li>Sub item 1.1</li>
      <li>Sub item 1.2</li>
      <li>Sub item 1.3</li>
    </ul>
  </li>
  <li class="menu">Menu 2
    <ul>
      <li>Sub item 2.1</li>
      <li>Sub item 2.2</li>
      <li>Sub item 2.3</li>
    </ul>
  </li>
</ul>

Upvotes: 1

user6748331
user6748331

Reputation:

No need to register new variable and count clicks. Just add/remove nonexistent class "clicked" and test on click if element "is" clicked

$(function() {  
  $('.menu').click(function () {
    if ($(this).is('.clicked')) {
      $(this).css({left:0})
                    .removeClass('clicked');
    } else {
      $(this).css({left:20})
                    .addClass('clicked');
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<li class='menu' title='Menu' style='position:relative'>AA</li>

Upvotes: 0

Caspar Wylie
Caspar Wylie

Reputation: 2833

You are being slightly unclear but I think you mean you want to use JQuery's toggleClass, or, I would use a click record, and check whether the count is even or odd: open or closed.

$(function() {  
    var clickCount = 0;
    $('.menu').click(function () {
        if(clickCount%2==0){
              //do when open
               $('#css-menu').css({right:'0'});
        }else{
             //do when closed
             $('#css-menu').css({right:'-340px'});
         }
        clickCount++;
    });
});

Hope this helps.

Upvotes: 1

Related Questions