javascript - JQuery - Show/hide 2 divs with 1 button and change value of button -
i've trying make when click button hide 1 div , show @ same time change value of button reflect different content of divs.
i've been able create 2 functions when put them seems break.
here's show/hide function
javascript :
function change() { if (document.getelementbyid('tabs')) { if (document.getelementbyid('tabs').style.display == 'none') { document.getelementbyid('tabs').style.display = 'block'; document.getelementbyid('parklist').style.display = 'none';} else { document.getelementbyid('tabs').style.display = 'none'; document.getelementbyid('parklist').style.display = 'block';} } }
and here's value change function
javascript:
function change( el ) { if ( el.value === "div1" ) el.value = "div2"; else el.value = "div1"; }
and here's html both
html:
<div id="tabs">div 1</div> <div id="parklist">div 2</div> <input type="submit" value="div1" onclick="return change(this);"/>
i'm bit of novice great.
you can try jquery
toogle() function switch display property of matched element.
- by default
parklist
div hidden. - add click listener on
submit
button. - toggle display property of both divs on click of submit button
- set value of submit button visible div's content.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="tabs">div 1</div> <div id="parklist" style="display:none">div 2</div> <input type="submit" value="div 1"/> <script> var submit = $('input[type="submit"]'); var tabs = $('#tabs'); var parklist = $('#parklist'); submit.click(function(e){ tabs.toggle(); parklist.toggle(); if(tabs.css('display') == 'none'){ submit.val(parklist.text()); }else{ submit.val(tabs.text()); } }); </script>
Comments
Post a Comment