How to show one div and hide another div in javascript on same html page -
i having 1 html page in navigation (lets them tabs) resides.
i wrote javascript show 1 , hide 1 on link click.
it works on tab want when navigate tabs div showing on bottom. dont want display in other tabs.
this javascript code:
function displayblock(divname){ if(document.getelementbyid("vend")) { var olddiv = document.getelementbyid("vend"); olddiv.style.display = 'none'; //show div var newdiv = document.getelementbyid(divname); newdiv.style.display = 'block'; } else{ var newdiv = document.getelementbyid(divname); newdiv.style.display = 'none'; } }
how modify meet need?
html structure:
<div class="tab-content"> <div class="tab-pane" id="dashboard"> <div class="container"> <!-- container code --> </div> </div> <div class="tab-pane" id="vend"> <div class="container"> <!-- container code --> <a id="auto-topup2" href="dashboard#auto-topup" onclick="displayblock('schedule');"> schedule autovend </a> </div> </div> <div class="tab-pane" id="commision"> <div class="container"> <!-- container code --> </div> </div> <div id="schedule" style="display:none"> <div class="tab-pane" id="auto-topup"> <div class="container"> <!-- container code --> </div> </div> </div>
in vend section have created onclick call function , hide div vend id , show div schedule id....but div scehdule id showing in tabs..
i hope can undestandable
to hide tabs without selected 1 can use function:
function displayblock(idofblock) { document.getelementbyclass('block').style.display = 'none'; document.getelementbyid(idofblock).style.display = 'block' } <div class="block" id="hello"> hello </div> <div class="block" id="foobar"> foobar </div>
Comments
Post a Comment