javascript - CSS class toggle with jquery on different id's -
i'm trying write jquery code toggling 2 different class on different ids. since cms strips out inline css, need find solution "display:none" have written 2 css classes, in hopes of toggling between them, not sure if direction go . i'm new stack , jquery info or corrections welcomed here code:
css
.displaynone{ display:none; } .displayblock{ display:block; }
html & javascript
<form> <input onclick="javascript:resetform();document.forms[0].reset();" type="reset" value="reset" />  <br /> <br /> <h4>are number 1?</h4> <label> <input name="one" onclick="unhide('hidden-input', this, 'hidden-input2')" type="radio" value="1" /> yes <br /> </label> <label> <input name="one" onclick="unhide('hidden-input2', this, 'hidden-input')" type="radio" value="2" /> no <br /> </label> <div id="hidden-input2" style="display: none;"> <p>if not , please download: <br /> <a href="#" target="_blank"> <span style="font-size: x-small;">number one</span> </a> </p> </div> <div id="hidden-input" style="display: none;"> <hr /> <h4>were selected many hours?</h4> <label> <input name="hours" onclick="unhide('hidden-input3', this, 'hidden-input4')" type="radio" value="1" /> yes <br /> </label> <div id="hidden-input3" style="display: none;"> <p>if selected many hours, please download: <br /> <a href="#" target="blank"> <span style="font-size: x-small;">hours</span> </a> </p> </div> <label> <input name="hours" onclick="unhide('hidden-input4', this, 'hidden-input3')" type="radio" value="2" /> no <br /> </label> <div id="hidden-input4" style="display: none;"> <hr /> <h4>were selected number 3?</h4> <label> <input name="gpa" onclick="unhide('hidden-input5', this, 'hidden-input6')" type="radio" value="1" /> yes <br /> </label> <div id="hidden-input5" style="display: none;"> <p>if selected number 3, please download: <br /> <a href="#" target="blank"> <span style="font-size: x-small;">form 3 </span> </a> </p> </div> <label> <input name="gpa" onclick="unhide('hidden-input6', this, 'hidden-input5')" type="radio" value="2" /> no <br /> </label> <div id="hidden-input6" style="display: none;"> <p>were selected 4 : <br /> <a href="#" target="blank"> <span style="font-size: x-small;">form 4</span> </a> </p> </div> </div> </div>undefined </form>
change element default display:block , define class
.hidden{ display:none; }
and use toggle class on/off
$('#yourid').toggleclass("hidden")
Comments
Post a Comment