Page 1 of 1

I want to hide others when one is selected

Posted: Thu Aug 16, 2007 4:04 am
by legend986
I''m using the scriptaculous library for Ajax functions. I'm using the following sample code for a form:

Code: Select all

<p>
<input type="radio" name="sample" value="1" onClick="new Effect.toggle('eventcontent1');">Sample1<br>
<input type="radio" name="sample" value="2" onClick="new Effect.toggle('eventcontent2');">Sample2<br>
<input type="radio" name="sample" value="3" onClick="new Effect.toggle('eventcontent3');">Sample3<br>
</p>
<p>
<div id="eventcontent1" style="display:none;">Hello there. Selected 1</div>
<div id="eventcontent2" style="display:none;">Hello there. Selected 2</div>
<div id="eventcontent3" style="display:none;">Hello there. Selected 3</div>
</p>
When I select the first radio box, the expected event if happening. But what I want to close all other div tags before opening this?And by closing all other div tags, I don't mean closing everything on the form, just the div tags related to this particular field. how is this achieved?

Posted: Thu Aug 16, 2007 4:41 am
by miro_igov
Do not know what is your event object but just with toggle you will not be able to close the other divs because i assume toggle switches the display property so you do not have feedback what it was before the toggle.

Code: Select all

<input type="radio" name="sample" value="1" onClick="document.getElementById('eventcontent2').display='none'; document.getElementById('eventcontent3').display='none'; document.getElementById('eventcontent1').display='block'; ">Sample1<br>
<input type="radio" name="sample" value="2" onClick="document.getElementById('eventcontent1').display='none'; document.getElementById('eventcontent3').display='none'; document.getElementById('eventcontent2').display='block';">Sample2<br>
<input type="radio" name="sample" value="3" onClick="document.getElementById('eventcontent1').display='none'; document.getElementById('eventcontent2').display='none'; document.getElementById('eventcontent3').display='block';">Sample3<br> 

Of course you can make much better JS function to save bytes, based on the idea.

Posted: Thu Aug 16, 2007 4:46 am
by legend986
Thank You.. Just tried it out with the Event attribute itself. That is a definition in the library. It is fine for a limited div tags, but what abt a page having a lot of tags? I cannot possible use permutations here... :)

Posted: Thu Aug 16, 2007 5:03 am
by miro_igov
Then you can write a function what i said as suggestion. This function will contain all the div id-s defined and will accept the id of the div you want to display as argument. This will make it to loop through all the div-s setting their display="none" and finally sets the display="block" for the element you passed as argument.

You can use common div names to load the div id-s for example if your divs are eventcontentXXX you can do

Code: Select all


var all_divs;
function load_divs(number_of_all_divs) {
  for(i=1;i<=number_of_all_divs;i++) all_divs[i] = 'eventcontent'+i;
} 

And something like this for closing the divs:

Code: Select all

function bla(the_needed_div) {

for(i=1;i<=all_divs.length;i++) document.getElementById(all_divs[i]).style.display = 'none';

document.getElementById(the_needed_div).style.display = 'block';
}

And finally the onclciks:

Code: Select all

<body onLoad="load_divs(8)"> <!-- This is if you plan to have 8 divs from  eventcontent1 to eventcontent8 -->
....
....
<input type="radio" name="sample" value="1" onClick="bla(5)">Sample1<br> <!-- This will hide all divs and display div #5 -->

Posted: Fri Aug 17, 2007 3:42 pm
by legend986
:bow: Thank you so much!