Modify jscript show/hide div...?

[acctman]

Right now the current script shows and hide's two divs... it works fine but it does not hide an open div when the other one is shown. basically only one div should be own at a time. can anyone asist with helping me add that piece of coding?



<!-- display Forms -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function ShowHide1(){
$("#slidingDiv1").animate({"height": "toggle"}, { duration: 100 });
}
function ShowHide2(){
$("#slidingDiv2").animate({"height": "toggle"}, { duration: 100 });
}
//]]>
</script>

<a onclick="ShowHide1(); return false;" href="#">Section 1</a>
<a onclick="ShowHide2(); return false;" href="#">Section 2</a>


<div id="slidingDiv1" style="display:none;">
THIS is for Section 1 <a onclick="ShowHide1(); return false;" href="#">hide</a>
</div>

<div id="slidingDiv2" style="display:none;">
This is for Section 2 <a onclick="ShowHide2(); return false;" href="#">hide</a>
</div>
<!-- /display Forms -->

[Nile]

<!-- display Forms -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function ShowHide1(){
$("#slidingDiv1").animate({"height": "toggle"}, { duration: 100 });
if($("#slidingDiv2").css('display','block')){
$("#slidingDiv2").slideUp({ duration: 100 });
}
}
function ShowHide2(){
$("#slidingDiv2").animate({"height": "toggle"}, { duration: 100 });
if($("#slidingDiv1").css('display','block')){
$("#slidingDiv1").slideUp({ duration: 100 });
}
}
//]]>
</script>

<a onclick="ShowHide1(); return false;" href="#">Section 1</a>
<a onclick="ShowHide2(); return false;" href="#">Section 2</a>


<div id="slidingDiv1" style="display:none;">
THIS is for Section 1 <a onclick="ShowHide1(); return false;" href="#">hide</a>
</div>

<div id="slidingDiv2" style="display:none;">
This is for Section 2 <a onclick="ShowHide2(); return false;" href="#">hide</a>
</div>
<!-- /display Forms -->

[jscheuer1]

How about (Note: Requires jQuery 1.4x as indicated in the external script tag):


<!-- display Forms -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
//<![CDATA[
jQuery(function($){
var c = $('.contentDivs'), a;
$('.showHide').bind('click', function(e){
e.preventDefault();
c.slideUp(200);
if((a = $(this).attr('href')) === '#hide'){
return;
}
$(a).delay(100).slideDown(300);
});
});
//]]>
</script>

<a class="showHide" href="#slidingDiv1">Section 1</a>
<a class="showHide" href="#slidingDiv2">Section 2</a>


<div class="contentDivs" id="slidingDiv1" style="display:none;">
THIS is for Section 1 <a class="showHide" href="#hide">hide</a>
</div>

<div class="contentDivs" id="slidingDiv2" style="display:none;">
This is for Section 2 <a class="showHide" href="#hide">hide</a>
</div>
<!-- /display Forms -->

[bozimitz]

hi i am new here at this forum... what does this code for?

[Nile]

What does this sentence mean for?

[jscheuer1]

hi i am new here at this forum... what does this code for?

It (from my previous post in this thread) slides content in and out of view on the page. Just copy it exactly as it is, save it as whatever.htm. and try it out, you'll see.