PDA

Click to See Complete Forum and Search --> : Category expands upon clicking???

Danbabe
07-11-2008, 01:12 PM
Hi folks,

I really need your help again! I have data that is categorised. What I need to know is if someone clicks a category, the data then expands to show sub categories or content.

Imagine an FAQ area that is displayed by categories. When someone clicks on a category, rather than get the server to load a new page with all the questions that have been asked before under that category, the content expands to show all the questions underneath that category. Then if the user clicks that category again, the data contracts again to just show the category title.

Someone told me that this can be done using style sheets and Javascript.

Has anyone got any code that I can take a look at or examples that will help me here?

As an example of what I am talking about, visit; http://www.adobe.com/products/flex/faq/

You will see from the example that when the plus sign is clicked, the data moves down the page and displays content under that category. I cannot make head nor tail of the code myself.

Many thanks

Dan
mitya
07-11-2008, 04:50 PM
Yeap that's what JS is for - changing in real time, no page transitions. Here's something that sort of does what you want that I've written on the fly. Any questions, fire away. I didn't go so far as to include the nest open/close images, but they can be added with some fairly simple modification.

<html>

<head>

<script>

numOfCats = 2; //store the number of categories here

function showHideQs(qId) {

//declare the DIV holding this category's questions, so we can reference it easily in other code lines
layerObj = document.getElementById('cat'+qId+'QsHolder');

if (layerObj.style.display == "none") {
newDisplayArg = "block";
newLinkText = "hide";
} else {
newDisplayArg = "none";
newLinkText = "show";
}
//by the way, block means show the object, none means hide it

//effect our changes - update the link (to read 'show' or 'hide') and update the div holder's visibility
document.getElementById('showHideLink'+qId).innerText = newLinkText;
layerObj.style.display = newDisplayArg;

//close any previously opened category
for (f=0; f<numOfCats; f++) {
if (f+1 != qId) {
//close cat
document.getElementById('cat'+(f+1)+'QsHolder').style.display = "none";
//update link text
document.getElementById('showHideLink'+(f+1)).innerText = "show";
}
}

}

</script>

</head>

<body>

<b>FAQ category 1 <a href=javascript:showHideQs(1); id=showHideLink1>(show)</a></b>
<br>
<div id=cat1QsHolder style="display: none">
<a href=question1.1.htm>question 1</a>
<br>
<a href=question1.2.htm>question 2</a>
<br>
<a href=question1.3.htm>question 3</a>
</div>

<br><br>

<b>FAQ category 2 <a href=javascript:showHideQs(2); id=showHideLink2>(show)</a></b>
<br>
<div id=cat2QsHolder style="display: none">
<a href=question2.1.htm>question 1</a>
<br>
<a href=question2.2.htm>question 2</a>
<br>
<a href=question2.3.htm>question 3</a>
</div>

</body>

</html>
donatello
07-11-2008, 05:03 PM
That's called "pagination"

Use my JavaScript Search (http://www.javascriptsearch.org) to find a pagination script. There are dozens of them including some that look like MS Explorer.