How to reveal information when clicking on a button/text?

I have a table with 'see more' written on the side of the title "Trainee Insurance.."

I want people to be able to click see more and then information appears b开发者_JAVA技巧elow the title

How do I do this?

Thanks!

James

<table height="20" width="775" cellpadding="0" cellspacing="0">
<tr>
<td>
<font face="lucidagrande" size="4" color="black">Trainee Insurance Broker - London</font>
<td align="right">
<font face="lucidagrande" size="2" color="red">See More...</font> 
</td>
</tr>
</table>

With JQuery:

Give IDs to your 'See More' button and the content that is to be displayed:

$('#see_more').click( function() { $('#more_content').show(); });

You've got a bad case of 1990s HTML.

Here's the 1990s way to do it:

<div>Trainee Insurance Broker - London</div>
<div id="a1" style="display:none">### more information ###</div>
<a href="javascript://" onclick="showThis('a1')">See More...</a>

JS:

function showThis(id) {
   document.getElementById(id).style.display='block'  
}

A few tips:

• don't use tables for layout. Use HTML + CSS
• don't use inline font statement, use CSS
• explore jQuery.

There might be other ways -- non-JavaScript ways -- but I have always used JavaScript to do this. Add an onclick handler to the "see more" td and, in that handler, set the more element to have display:inline style, something like this (untested):

<script type="text/javascript">
function show_more ( element_to_show ) {
var element_to_show = getRefToDiv( element_to_show );
element_to_show.style.display = "inline";
}
</script>

<table height="20" width="775" cellpadding="0" cellspacing="0">
<tr>
<td>
<font face="lucidagrande" size="4" color="black">Trainee Insurance Broker - London</font>
<td align="right" onclick="show_more('more');">
<font face="lucidagrande" size="2" color="red">See More...</font> 
</td>
<td id="more" style="display:none;">The guy will see this when he clicks See More...</td>, 
</tr>
</table>

I would use jQuery to show/hide the block of text whenever "See More...." is clicked.

http://api.jquery.com/show/

Of course, this assumes you're already familiar with jQuery. If you aren't, or you can't/won't use it, a quick Google search turned up http://www.cssnewbie.com/showhide-content-css-javascript/

Use display=none; in style and remove it on onclick event.

You will need to either; Have a hidden DIV that appears when you click 'see more'. Which will need to be Javascript or JQuery. OR Have some PHP to generate another row in the table.

If you want to load data in from a separate file you'll have to use AJAX. If you want to show an element that's already on the page when "See More" is clicked you can use regular javascript. Just add a new row to the table, give it an ID and hide it using inline styles. Then add a link around your "see more" text and give it an onclick handler that shows the hidden row. Like this:

<table height="20" width="775" cellpadding="0" cellspacing="0">
    <tr>
        <td><font face="lucidagrande" size="4" color="black">Trainee Insurance Broker - London</font></td>
        <td align="right"><font face="lucidagrande" size="2" color="red"><a href="#" onclick="document.getElementById('showme').style.display = 'table-row'; return false;">See More...</a></font></td>
    </tr>
    <tr id="showme" style="display: none">
        <td colspan="2">More info appears here!!!</td>
    </tr>
</table>

<script language="javascript">
$(document).ready(function(){

$('#see_more').click(function(){
$("#more_text").show();
});

     $("#more_text").hide();
});

</script>




 <table height="20" width="775" cellpadding="0" cellspacing="0">
 <tr>
 <td>
 <font face="lucidagrande" size="4" color="black">Trainee Insurance Broker - London</font>
 <td align="right" id="see_more">
 <font face="lucidagrande" size="2" color="red">See More...</font> 
 </td>
 </tr>

      <tr><td id="more_text">This is more text here......</td></tr>


 </table>