Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Aug 2008
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Expandable/collapsible content

    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!

  • #2
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    I went into your page and can't seem to find the markup you've posted, Anyway, have a try on changing this part:
    PHP Code:
    echo "<tr><th align='left'><h2><a onclick="return toggle('newscontent')">$newsTitle</a></h2></th><th align='right'>$submitDate</th></tr>"
    into:
    PHP Code:
    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.
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #3
    New to the CF scene
    Join Date
    Aug 2008
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •