Question

I am working on div which is hidden and has a “show” button. Once clicked it displays the content of the div “anotherdiv”. And the text of the button is change to “HIDE”. Following is my jquery code:

<button id = "visible" value = "0">SHOW</button>
$("#visible").click(function(){
  $this = $(this);
  var divValue = $this.attr('value');
  if (divValue == 1){
      $this.attr('value','0');
      $('#anotherdiv').slideUp(1000);
      $this.text('HIDE');
  }else{
      $this.attr('value','1');
      $('#anotherdiv').slideDown(1000);
      $this.text('HIDE');    
  }
});

This code works fine on Firefox, Chrome and Safari. But on IE, it works on first step, when SHOW button is clicked, the “anotherdiv” is open, the text of the botton is changed to “HIDE” and the value attribute is changed to ‘1’ . But when the “HIDE” button is clicked, the IE does not capture the value attribute. How can I solve this problem. There were some similar posts in Stackoverflow, but I could not find the definite answer. Thank you.

Answer 1

Data attributes should be stored with a “data-” prefix. Helpful site about custom data attributes:
http://html5doctor.com/html5-custom-data-attributes/

This updated version worked for me on IE8:
http://jsfiddle.net/vSMK6/2/