Switch DIV out for another DIV and replace top DIV in drop-down...

Please refer to this question for history: http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_25354940.html

Everything was working fine until I needed to add more tags (img, another div). This is the behavior I am looking for (see below code):

The hideanddisplay() function adds the 'display: block' to the $smartcount$ div which affects how the top DIV is displayed. Is there a way to single out the div that I want to replace in the hideanddisplay() function so that the img and other DIV are written with it (like the below example)?

I am also attaching the current code that I have since modified since the last question I asked. Please let me know if you have any questions. Also if you want to use any jQuery to simplify things I am all for that.

I don't think I have many points to offer you but I will give everything I have and keep adding to everyday.

Thanks,
Brad
<!-- Before click -->

<div class="main">
	<div id="agency" class="title">
		<div style="display: block;" id="broker0"><a href="http://www.tdameritrade.com/welcome1.html" target="_blank">TD Ameritrade</a></div>
		<img src="http://i.cdn.foobar.com/images/1.gif">
		<div style="position: absolute; visibility: hidden;">$snartcount$</div>
		<div style="display: none;" id="broker1"><a href="https://us.etrade.com/e/t/investingandtrading?SC=NPNRR26&amp;ch_id=P&amp;s_id=GOOG&amp;c_id=BR&amp;o_id=100&amp;k_id=etrade%5D&amp;gclid=CIDnrODK4J4CFQ8eDQodmCDOMw" target="_blank">E-Trade</a></div>
		<div style="display: none;" id="broker2"><a href="https://www.fidelity.com/?imm_pid=1&amp;immid=00263&amp;imm_eid=e3185815&amp;buf=999999" target="_blank">Fidelity</a></div>
		<div style="display: none;" id="broker3"><a href="http://www.scottrade.com/" target="_blank">Scottrade</a></div>
	</div>
	<div class="broker-area" id="menu">
		<div class="subtitle">
			select a different broker
		</div>
		<div class="arrow">
			<img src="http://i.cdn.foobar.com/money/fn_adspaces/creatives/2010/1/15/32312arrow.png" height="8" width="12">
		</div>
		<div class="hover_menu" id="list">
			<div style="display: none;" id="broker0"><a onclick="hideanddisplay(0);" href="http://www.tdameritrade.com/welcome1.html" target="_blank">TD Ameritrade</a></div>
		        <div style="display: block;" id="broker1"><a onclick="hideanddisplay(1);" href="https://us.etrade.com/e/t/investingandtrading?SC=NPNRR26&amp;ch_id=P&amp;s_id=GOOG&amp;c_id=BR&amp;o_id=100&amp;k_id=etrade%5D&amp;gclid=CIDnrODK4J4CFQ8eDQodmCDOMw" target="_blank">E-Trade</a></div>
			<img src="http://i.cdn.foobar.com/money/images/1.gif">
			<div style="position: absolute; visibility: hidden;">$smartcount$</div>
			<div style="display: block;" id="broker2"><a onclick="hideanddisplay(2);" href="https://www.fidelity.com/?imm_pid=1&amp;immid=00263&amp;imm_eid=e3185815&amp;buf=999999" target="_blank">Fidelity</a></div>
			<img src="http://i.cdn.foobar.com/money/images/1.gif">
			<div style="position: absolute; visibility: hidden;">$smartcount$</div>
			<div style="display: block;" id="broker3"><a onclick="hideanddisplay(3);" href="http://www.scottrade.com/" target="_blank">Scottrade</a></div>
			<img src="http://i.cdn.foobar.com/money/images/1.gif">
			<div style="position: absolute; visibility: hidden;">$smartcount$</div>
		</div>
	</div>
</div>

<!-- After click (assuming I click on Scottrtade in the drop-down) -->

<div class="main">
	<div id="agency" class="title">
		<div style="display: none;" id="broker0"><a href="http://www.tdameritrade.com/welcome1.html" target="_blank">TD Ameritrade</a></div>
		<div style="display: none;" id="broker1"><a href="https://us.etrade.com/e/t/investingandtrading?SC=NPNRR26&amp;ch_id=P&amp;s_id=GOOG&amp;c_id=BR&amp;o_id=100&amp;k_id=etrade%5D&amp;gclid=CIDnrODK4J4CFQ8eDQodmCDOMw" target="_blank">E-Trade</a></div>
		<div style="display: none;" id="broker2"><a href="https://www.fidelity.com/?imm_pid=1&amp;immid=00263&amp;imm_eid=e3185815&amp;buf=999999" target="_blank">Fidelity</a></div>
		<div style="display: block;" id="broker3"><a href="http://www.scottrade.com/" target="_blank">Scottrade</a></div>
		<img src="http://i.cdn.foobar.com/money/images/1.gif">
		<div style="position: absolute; visibility: hidden;">$smartcount$</div>
	</div>
	<div class="broker-area" id="menu">
		<div class="subtitle">
			select a different broker
		</div>
		<div class="arrow">
			<img src="http://i.cdn.foobar.com/money/fn_adspaces/creatives/2010/1/15/32312arrow.png" height="8" width="12">
		</div>
		<div class="hover_menu" id="list">
			<div style="display: block;" id="broker0"><a onclick="hideanddisplay(0);" href="http://www.tdameritrade.com/welcome1.html" target="_blank">TD Ameritrade</a></div>
			<img src="http://i.cdn.foobar.com/money/images/1.gif">
			<div style="position: absolute; visibility: hidden;">$smartcount$</div>
			<div style="display: block;" id="broker1"><a onclick="hideanddisplay(1);" href="https://us.etrade.com/e/t/investingandtrading?SC=NPNRR26&amp;ch_id=P&amp;s_id=GOOG&amp;c_id=BR&amp;o_id=100&amp;k_id=etrade%5D&amp;gclid=CIDnrODK4J4CFQ8eDQodmCDOMw" target="_blank">E-Trade</a></div>
			<img src="http://i.cdn.foobar.com/money/images/1.gif">
			<div style="position: absolute; visibility: hidden;">$smartcount$</div>
			<div style="display: block;" id="broker2"><a onclick="hideanddisplay(2);" href="https://www.fidelity.com/?imm_pid=1&amp;immid=00263&amp;imm_eid=e3185815&amp;buf=999999" target="_blank">Fidelity</a></div>
			<img src="http://i.cdn.foobar.com/money/images/1.gif">
			<div style="position: absolute; visibility: hidden;">$smartcount$</div>
			<div style="display: none;" id="broker3"><a onclick="hideanddisplay(3);" href="http://www.scottrade.com/" target="_blank">Scottrade</a></div>
		</div>
	</div>
</div>

Open in new window

money-test.html
LVL 7
Brad Dobyns, CSMScrumMasterAsked:
Who is Participating?
 
Pravin AsarConnect With a Mentor Principal Systems EngineerCommented:
If you assign Id to the div(s) you want to be unaffected, you can use following code.


// Your Code
function hideanddisplay(n) {
            var d = document.getElementById("agency").getElementsByTagName("div");
                //
               // Remove elements
               //
                removeByElementID(d,'divToKeep');

            for (var m = 0; m < d.length; m++) d[m].style.display = ((m == n) ? "block" : "none");
            var d = document.getElementById("list").getElementsByTagName("div");
            for (var m = 0; m < d.length; m++) d[m].style.display = ((m == n) ? "none" : "block");
      }

// Remove Function

      function removeByElementID(arrayName,arrayElementID)
       {
                for(var i=0; i<arrayName.length;i++ )
                 {
                    if(arrayName[i].id==arrayElementID)
                        arrayName.splice(i,1);
                  }
        }
0
 
Brad Dobyns, CSMScrumMasterAuthor Commented:
Interesting.....

So you are thinking something like this?
	function hideanddisplay(n) {
		var d = document.getElementById("agency").getElementsByTagName("div");
		removeByElementID(d,d[n].id);
		for (var m = 0; m < d.length; m++) d[m].style.display = ((m == n) ? "block" : "none");
		var d = document.getElementById("list").getElementsByTagName("div");
		for (var m = 0; m < d.length; m++) d[m].style.display = ((m == n) ? "none" : "block");
	}
	
	function removeByElementID(arrayName,arrayElementID) {
		for(var i=0; i < arrayName.length; i++) {
			if (arrayName[i].id == arrayElementID) arrayName.splice(i,1);
		}
	}

Open in new window

0
All Courses

From novice to tech pro — start learning today.