CODEWITHSUNDEEP
javascripthtmlcss
James
James

Reputation: 1925

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 below 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>

Upvotes: 3

Views: 10640

Answers (8)

Pete Wilson
Pete Wilson

Reputation: 8694

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>

Upvotes: 1

Mithun Satheesh
Mithun Satheesh

Reputation: 27855

<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>

Upvotes: 0

cmpolis
cmpolis

Reputation: 3051

With JQuery:

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

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

Upvotes: 3

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114367

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.

Upvotes: 2

Joe Landsman
Joe Landsman

Reputation: 2177

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>

Upvotes: 0

user908157
user908157

Reputation:

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.

Upvotes: 0

Clement Bellot
Clement Bellot

Reputation: 841

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

Upvotes: 0

Blazemonger
Blazemonger

Reputation: 92893

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/

Upvotes: 0

Related Questions