Javascript: conditional function onClick button

Question

I have to functions: openNav and closeNav and a button:

 <a href="#" data-toggle="sidebar-collapse-button">
                    <img class="sidebar-img" id = "collapse-img" src="${pageContext.request.contextPath}/imgs/main/sidebar/collapse.png"/>
                    <span class="sidebar-text">Collapse</span>
 </a>

A try to set a conditional onClick like this:

var collapsed = 0;

$('[data-toggle=sidebar-collapse-button]').click(function() {
    if (collapsed==0)  {
    closeNav();
    }
    else  {
        openNav();
    }    

});

So that when collapsed = 1 function openNav is called and vice versa:

function openNav() {
    ...

    collapsed=0;
}

function closeNav() {
    ...

    collapsed=1;
}

However it only works the first time to call closeNav and then the button doesn't react at all.

How did you determine it doesn't react? Did you debug it? Your code seems to work fine, I've put a console.log in the code: jsfiddle.net/5u2oxn9q — putvande
– putvande, Commented Oct 28, 2018 at 20:17
Instead of using a collapsed variable, just create a css class .closed that handles the hiding. Then $('[data-toggle=sidebar-collapse-button]').click(function() { $(this).toggleClass('closed'); }) — connexo
– connexo, Commented Oct 28, 2018 at 20:21
It is working fine for me, please check other relative issue. — Hanif
– Hanif, Commented Oct 28, 2018 at 20:25

alpharomeo · Accepted Answer · 2018-10-28 20:26:42Z

As @connexo said, I would be inclined to use a toggle as well - if it is a show and hide you are trying to achieve.

If you want to use your logic, you can do something like this using a data attribute (or something similar):

Eg:

<a href="#" data-toggle="sidebar-collapse-button" data-state="0">
                    <img class="sidebar-img" id = "collapse-img" src="https://via.placeholder.com/150"/>
                    <span class="sidebar-text">Collapse</span>
 </a>

And for your script you can use:

var collapsed = 0;

$('[data-toggle=sidebar-collapse-button]').click(function() {
    var state = $(this).data('state');
    if (state == "0") {
        console.log("Closed");
      $(this).data('state','1')
    } else {
        console.log("Opened");
      $(this).data('state','0')
    }
console.log(state);
});

Further reading on data: .data()

AnHa · Accepted Answer · 2018-10-28 20:26:28Z

1

Here is a simple toggler in vanilla Javascript. I am not sure want you want to do or what frameworks you use but this is the basic idea

 <a href="#" onCLick="toggleSidebar()" data-toggle="sidebar-collapse-button">
  <span class="sidebar-text">Collapse</span>
 </a>

<div id="myDiv">
  Collapsed div
</div>

toggleSidebar = () => {
  let element = document.getElementById("myDiv")
  if(element.classList.contains("mystyle")){
    element.classList.remove("mystyle");
  } else  element.classList.add("mystyle");
}

answered Oct 28, 2018 at 20:26

AnHa

1301 silver badge7 bronze badges

1 Comment

connexo Over a year ago

You seem to have missed out on element.classList.toggle('mystyle').

Collectives™ on Stack Overflow

Javascript: conditional function onClick button

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related