Link to custom visualforce detail page

Question

I have a page that displays Ideas dynamically with page blocks and repeater. I would like to be able to click the title of the Idea as a link that would take me to another custom visualforce page that shows the details of the record that I clicked on. Here is my code for the page block:

<apex:pageBlock >
<apex:repeat value="{!Recent2}" var="r">
<div class="data-info">

<div> 

    <ul>

    <img src="{!URLFOR($Resource.Cost_Center, 'images/person_image.png')}" width="75" height="75" alt="costcenter"/>
    <li>
    <ul>  
        <li><label>Idea Title</label>
            :<span id="title"> {!r.Title}</span></li>
        <li><label>Name</label>
            :<span id="username"> {!r.CreatedBy.Name}</span></li>

        <li><label>Date</label>
            :<span id="date"> {!r.CreatedDate}</span></li>
        <li><a class="btn-sm btn-data" role="button"><span id="Votes">Vote Score: {!r.VoteTotal}</span></a> <a class="btn-sm btn-data"  role="button"><span id="Comments">Comments</span></a></li>
    </ul>
    </li>

    </ul> 

</div>
</div>
</apex:repeat> 
</apex:pageBlock>

Controller:

public with sharing class topIdeaExt {

    public List<Idea> getRecent2()
    {
        return [SELECT Id, Title, CreatedBy.Name, Voting_Status__c, CreatedDate, VoteTotal FROM Idea WHERE Voting_Status__c = 'Active' order by createdDate desc Limit 10];
    }

How would I accomplish this? I'm still getting the feel for Java.

Thanks!

Answer 1

Change this:

:<span id="title"> {!r.Title}</span></li>

to THIS:

:<span id="title"> <a href="/apex/VFPAGENAME?id={!r.id}">{!r.Title}</a></span></li>