1

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.

2
  • The code worked as expected for me in IE9 and IE10 via a jsfiddle demo: jsfiddle.net/vSMK6
    – Sampson
    Apr 7, 2012 at 16:31
  • @JonathanSampson Most of my user are still using IE7 or IE8. It does not work on either one of them. any suggestion.
    – Hari
    Apr 7, 2012 at 16:34

1 Answer 1

0

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/

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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