Help with expanding/collapsing areas with Java Script

[trebor31]

Hi all
Java is a whole other world to me, so hoping someone can help with some scripting.

What I want to do is have two expandable areas, whereby clicking on a header causes the sub items to drop down. This bit I have got sorted using this the script in the "simple" template:

<script language='javascript' type='text/javascript'>
<!-- BEGIN
function flip(rid)
{
current=(document.getElementById(rid).style.displa y == 'none') ? 'block' : 'none';
document.getElementById(rid).style.display = current;
}
// End -->
</script>

with:

<script type='text/javascript'>
<!--
function gotocomments()
{
document.location = '#addcomment';
}
-->
</script>
<script language='javascript' type='text/javascript'>flip('add-comment');</script>


However, I want to cause any currently expanded sections to close when I open the second area. Eg, I have two headers: - Image Details and Comments. Images Notes is currently expanded, I then click on Comments and I want Image Notes to collapse and Comments to expand

Any one have any thoughts or knowledge on how I build on the exisiting script.

Many thanks for any help.

[austriaka]

just call flip function twice:
<script language='javascript' type='text/javascript'>flip('add-comment');flip('details');</script>
Where 'details' is the id of your Image Details <div>

Make sure you call it twice in onclick handler too.

(not tested)
KArin

[trebor31]

Thank you for the help - I tried that, but it doesnt quite do what I am after - this opens and closes both sections at the same time - and they are either both open, or both closed.

I am after getting it so that by opening one section, you close the other.

Any thoughts?

Thanks again.

[austriaka]

you have to define them first in CSS: one make display:block, the other one display:none
If they are defined different it should work

KArin

[trebor31]

Thanks again - really helpful - off to give it a try.

[trebor31]

Hmmm, still no joy - it is still opening and closing both at the same time. If one of them were open to start with at the page load I could get this to work, but as they are both closed on page load, it doesnt.

My ideal is that at page-load both sections are closed, and you only see the headers - you then click on "Image Details" and it expands (but "Comments" stays collapsed).
With "Image Details" expanded, if you then click on "Comments" this collapses "Image Details" and expands "Comments".
If you were to then, with "Comments" expanded, click on "Image Details" this would again expand "Image Details" and collapse "Comments".
(I hope it is possible to follow this :confused: !)

Here is my code:

script in header of index_template:

<script language='javascript' type='text/javascript'>
<!-- BEGIN
function flip(rid)
{
current=(document.getElementById(rid).style.displa y == 'none') ? 'block' : 'none';
document.getElementById(rid).style.display = current;
}
// End -->
</script>

Onclick and <div> from image_template:

<div class="sectionhead"><a href='#details' onclick="flip('details'); flip('add-comment'); return false;">Image Details</a></div>
<div id="details">
<script language='javascript' type='text/javascript'>flip('details');flip('add-comment');</script>

<div class="sectionhead"><a href='#add-comment' onclick="flip('add-comment');flip('details'); return false;">Comments</a></div>
<div id="add-comment">
<script language='javascript' type='text/javascript'>flip('add-comment');flip('details');</script>

and my CSS:

#add-comment {
display:block;
}

#details {
display:none;
}

I am wandering into an area of coding that I know nothing about, but from what I have read around the web, I think that it has something to do with the script in the header and I might need to change the script to include an "if..." section which states that "if" the Images Details div is displayed, the click on "Comments" closes it and vice-versa.

Thanks again

[austriaka]

Try this:

script in header of index_template:
<script language="javascript">
function flip(show, hide)
{
showdispl=(document.getElementById(show).style.dis play=='none'?'none':'block');
hidedispl=(document.getElementById(hide).style.dis play=='none'?'none':'block');
if (showdispl=='none' && hidedispl=='none') document.getElementById(show).style.display = 'block';
else if (showdispl=='block' && hidedispl=='block') {
document.getElementById(show).style.display = 'none';
document.getElementById(hide).style.display = 'none';
}
else {
document.getElementById(show).style.display = hidedispl;
document.getElementById(hide).style.display = showdispl;
}
}
</script>

Onclick and <div> from image_template:
<div class="sectionhead"><a href='#details' onclick="flip('details', 'ad-comment'); return false;">Image Details</a></div>
<div id="details">


<div class="sectionhead"><a href='#add-comment' onclick="flip('add-comment', 'details'); return false;">Comments</a></div>
<div id="add-comment">


put this somewhere at the end of the page (after the flip links and divs to flip, one time is enough)
<script language="javascript">flip('comments', 'details');</script>

and my CSS:

#add-comment {
display:block;
}

#details {
display:block;
}

if you put both to block first, people without JavaScript have a change to see that too. You can also set only the one to "block" you want to show people without Javascript. It is overruled by JavaScript to make the behaviour you want.

(If this works you owe me something ;-))
KArin

[trebor31]

Thank you so much for all this help - it really is appreciated.

I havent quite got it to work yet but a bit more tweaking and I am pretty certain we will be there! Once I have it finished I will post the final code in case anyone else is a mad as me and wants to do this!

I certainly owe you one.