Expandable/collapsible content

[Antho]

Hi all,

I'm working on a website that needs to have collapsible/expandable news content, ie there would be a list of news items that when you click the header the news item appears below.

Normally this would be pretty easy if the news content was just HTML/DIV/CSS. However the news page is pulled in via a php script:

The index.html reads:

<div id="center">
<div class="article_wrapper">
<?php
switch ($HTTP_GET_VARS[page]) {
//--begin main navigation--

//Default page.
default:
include "home.php";
break;

//Latest News
case 'news':
include 'news.php';
break;

The news content is pulled into the page via the news.php fiel:

<?php

$list = getNewsList();
foreach ($list as $value) {
$newsData = file("admin/news/news/".$value);
$newsTitle = $newsData[0];
$submitDate = $newsData[1];
unset ($newsData['0']);
unset ($newsData['1']);

$newsContent = "";
foreach ($newsData as $value) {
$newsContent .= $value;
}

echo "<tr><th align='left'><h2>$newsTitle</h2></th><th align='right'>$submitDate</th></tr>";
echo "<p>".$newsContent."</p>";
}
?>

Now to try add in the expand/collapse functionality I added in a javascript function called toggle into a file called toggle.js:

function toggle(a)
{
var e = document.getElementById(a);
if(!e) return true;
if(e.style.display == "none")
{
e.style.display = "block"
}
else
{
e.style.display = "none"
}
return true;
}

Finally, I've tried to incorporate this into the news.php file:

<?php

$list = getNewsList();

echo($javascript->link("js/toggle.js"));

foreach ($list as $value) {
$newsData = file("admin/news/news/".$value);
$newsTitle = $newsData[0];
$submitDate = $newsData[1];
unset ($newsData['0']);
unset ($newsData['1']);

$newsContent = "";
foreach ($newsData as $value) {
$newsContent .= $value;
}


echo "<tr><th align='left'><h2><a onclick="return toggle('newscontent')">$newsTitle</a></h2></th><th align='right'>$submitDate</th></tr>";
echo "<div id = "newscontent"><p>".$newsContent."</p></div>";
}
?>


Now, I've no idea if I'm doing this the right way or not. At the moment I'm getting a parse error in the second-to-last echo statement - "unexpected T-RETURN".

Can anyone help with this error, or suggest a better way of doing this?

The website is www.rallycrossrebels.com.

With abundant gratefulness!

[rangana]

I went into your page and can't seem to find the markup you've posted, Anyway, have a try on changing this part:

echo "<tr><th align='left'><h2><a onclick="return toggle('newscontent')">$newsTitle</a></h2></th><th align='right'>$submitDate</th></tr>";


into:

echo "<tr><th align='left'><h2><a onclick="toggle('newscontent') return false;">$newsTitle</a></h2></th><th align='right'>$submitDate</th></tr>";


Hope that helps.

[Antho]

Thanks for the suggestion, but I think I need to store each news item into some sort of Javascript array as php chucks it out, then dynamically generate the HTML to hold each news item/title as a separate DIV.

Then the client-side Javascript can do its thing, and the user can click on each news headline to expand/collapse the content.

Any ideas? This is becoming too complicated! :(