how would I make this javascript work in IE 8+?

I have this javascript inside a rails app:

<script type="text/javascript"> var buttons = document.querySelectorAll('[data-radio-sub-questions]'); for (var i = 0; i < buttons.length; i++){ buttons[i].addEventListener('click', show_sub_questions, false); } function show_sub_questions(e){ e = e.target // e.srcElement; was an attempt at making it work in IE var hidden_div = document.getElementById(e.dataset.radioSubQuestions) // document.getElementById(e.getAttribute('data-radio-sub-questions')); also an attempt at making it work in IE if(e.checked && hidden_div.className == 'hidden_questions_swipe'){ hidden_div.className = 'revealed_questions_swipe'; }else if(e.checked && hidden_div.className == 'revealed_questions_swipe'){ hidden_div.className = 'hidden_questions_swipe'; }else{ return; } } </script> 

So I am working on a very large application that allows people to buy insurance online, it has a lot of questions that if answered in a particular way show more questions that then need to be answered.

The above selects all the radio buttons which I put a data attribute on, it then assigns a click function to them. The data attribute actually holds the id of the div that needs to be shown if the question is answered in a particular way.

Here is the css: I am ok with the transistions not working in IE but I also need to know if the min/max/height attributes will work in the .revealed_questions_swipe class.

.hidden_questions_swipe{ height: 1px; transition: all .1s ease-in-out; -webkit-transition:all .1s ease-in-out; -moz-transition:all .1s ease-in-out; visibility:hidden; } .revealed_questions_swipe{ height: auto; min-height: 42px; max-height: auto; transition: all .1s ease-in-out; -webkit-transition:all .1s ease-in-out; -moz-transition:all .1s ease-in-out; visibility: visible; } 

I'm actually used to working on chrome applications so making it compliant with IE's lack of support is new to me :( any help would be appreciated.

UPDATE:

So I now have (after reading comments and answers):

var buttons; if(!document.querySelectorAll){ buttons = get_elements_for_ie("data-radio-sub-questions"); } else{ buttons = document.querySelectorAll('[data-radio-sub-questions]'); } for (var i = 0; i < buttons.length; i++){ if(!buttons[i].addEventListener){ buttons[i].attachEvent("onclick", show_sub_questions); }else { buttons[i].addEventListener('click', show_sub_questions, false); } } function show_sub_questions(e){ e = e.target || e.srcElement; var hidden_div = document.getElementById(e.dataset.radioSubQuestions) || document.getElementById(e.getAttribute('data-radio-sub-questions')); if(e.checked && hidden_div.className == 'hidden_questions_swipe'){ hidden_div.className = 'revealed_questions_swipe'; }else if(e.checked && hidden_div.className == 'revealed_questions_swipe'){ hidden_div.className = 'hidden_questions_swipe'; }else{ return; } } function get_elements_for_ie(data_attr){ var matched_elements = []; var all_elements = document.getElementsByTagName("*"); for(var i = 0; i < all_elements.length; i++){ if(all_elements[i].getAttribute(data_attr)){ matched_elements.push(all_elements[i]) } } return matched_elements } 

Still not working in IE 8 or 9 and still not seeing any errors.