Javascript Show Hide Div Trouble.

[neocorps]

Hello, im preety new to JS but i've managed to create a function to show and hide a div according to a link's URL, but im gonna have lots of url's and lots of div's to show and hide, its not a problem to show and hide them, the only trouble is that they stack, if i show div 1, and then press link 2 to show div 2, Div 2 is gonna be below div 1, and what i want is that when i click link 2 to hide div 1 or any other shown divs, im sure its possible but i don't know how to do it.

I think it would be possible by storing the id of the div in a variable, but the only problem is that when i call that function, the variable always changes so it would be a matter of storing the id in a variable outside the function, but i don't know how to do that, or what are the rules and i really don't have much time to study deep into it, plz some help?.

This is my code:

JS

function showHide(product) {
		var el = document.getElementById(product);
		el.className = (el.className == 'hide') ? '' : 'hide';
	}

HTML

<div id="1" class="hide">Content of Div 1</div>
<div id="2" class="hide">Content of Div 2</div>

<a href="javascript:showHide('1');">Show Hide 1</a>
<a href="javascript:showHide('2');">Show Hide 1</a>

CSS

.hide {
 display:none;
}

NOTE = I need to have the javascript function call in href because of an applet im using.

In resume, the divs are hidden at the start, when i click one link, the div shows, when i click the other link i need the previous div shown to be hidden (class="hide"), and show the new div and so on.

Thank you for the help in advance!!

[Eldarrion]

Here is the updated function:

<script type="text/javascript">
    function showHide(products) {
        var el = document.getElementById('cntnr');
        var children = el.childNodes;
        if (children[products].className == "hide") {
            for(var i=0; i < children.length; i++) {
                children[i].className = 'hide';
            }
            children[products].className = '';
        }
        else {
            children[products].className = 'hide';
        }
    }
</script>

And you're going to need to change the HTML mark-up a bit:

<div id="cntnr"><div class="hide">Content of Div 1</div><div class="hide">Content of Div 2</div></div>

Keep in mind that it is intentionally on one line with no spaces in between to avoid Mozilla's mix-up with whitespace and child elements.

And well, your links would be changed a little as well, like so:

<a href="javascript:showHide('0');">Show Hide 1</a>
<a href="javascript:showHide('1');">Show Hide 2</a>

There probably exists a better solution to this, but this is what I managed to come up with. Enjoy.

[neocorps]

Hey thank you very much, i'll give it a try and reply if it worked!

EDIT ----------------------

Ok i've tested it and works like a charm!, though for formatting purposes, i started in 1 instead of 0, that way i can have the divs in this order:

<div id="cntnr">
     <div class="hide">
           Content of Div 1
     </div><div class="hide">
           Content of Div 2
     </div>
</div>

Which is a little more understandable!.. thanx for the advice!

[marxman]

Hi i have a problem about hiding and showing divs. i have 3 divs (each div has an anchor). they were created using a repeater. i add a jquery script that if the anchor is clicked then the div will toggle (hide/show). the first and third div works fine. ive noticed that if i click the second div, both the second and third divs toggle.

ive already viewed the source and check the javascript code. and also debugged the javascript. and everything seems to work fine. except that it toggles both 2nd and 3rd div if the 2nd div is clicked.

im a bit frustrated over this now. coz i cant figure out wats wrong. need some help.

[marxman]

anyways heres the code:

run inside the Load_Page Event handler:

HtmlAnchor anchor = (HtmlAnchor)pnlCategory.FindControl("anchor");
HtmlTable table = (HtmlTable)pnlCategory.FindControl("table");
Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "__expcol" + pnlCategory.ClientID, String.Format("$(document).ready(function() {{ $('#{0}').click(function(e) {{ doExpandCollapse(e, '{1}'); }} ); }} );", anchor.ClientID, divContent.ClientID), true);
-----------------------------------------------------------------
javascript:

function doExpandCollapse(e, targetId) {

var target1 = document.getElementById(targetId);
var target = $("#" + targetId);
//if (target.css("display") == "block") { // expanded
if(target1.style.display == "block") {
//target[0].attributes["display"] = "none";
//target[0].css("display") = "none";
//target.slideUp(300);
//target.css("display", "none");
target1.style.display = "none";
// $("#" + icon).attr("src", collapseimage);
} // end if

else
{ // collapsed
//target.slideDown(300);
//target.css("display", "block");
target1.style.display = "block";
//target[0].attributes["display"] = "block";
//target.css("display") = "block";
// $("#" + icon).attr("src", expandimage);
} // end else
}

the commmented codes are the one's ive vainly tried but to no effect.