hide column when click read more

**nutsxiera** · 03-24-2011 06:08 AM

hi all.

i'm still newbie with programming.

i have created a table with two columns with a list of scholarship and a read more link.

what i want to do is to hide the second column if the user click the "read more" in first column and hide the first column when the user click the "read more" in second column.

if the user click "read less" it will show both column back like normal.

i try to use the javascript for hide column but it cannot link with my "read more" script.

i hope that anyone can help me. thanks in advance

**JMRKER** · 03-24-2011 06:55 AM

Post some sample code so that we don't need to "re-invent the wheel".
Show what you are trying to do with the code you already have.

**nutsxiera** · 03-24-2011 07:41 AM

here's the code. thanks

sorry my coding is kinda mess.

Code:

<body>
<script type="text/javascript" language="JavaScript"><!--
function DoReadMore(tid1,tid2,tid3) {
document.getElementById(tid1).style.display = "none";
document.getElementById(tid2).style.display = "";
document.getElementById(tid3).style.display = "";
 $(document).ready(function() {
            $('#DoReadMore').click(function() {
                $('td:nth-child(1)').hide();
            });
        });
}


function AbandonReadMore(tid1,tid2,tid3) {
document.getElementById(tid1).style.display = "none";
document.getElementById(tid2).style.display = "none";
document.getElementById(tid3).style.display = "";
 $(document).ready(function() {
            $('#AbandonReadMore').click(function() {
                $('td:nth-child(0)').hide();
            });
        });
}
//--></script>

<table width="629" border="0" cellpadding="10" cellspacing="0" bgcolor="#FFFFFF" style="border-top: 1px solid #DCDDDD;"> 

<tr>
<td> 
<table cellspacing="0" cellpadding="0" border="0" width="100%">
    <tbody>
 <tr>
<td style="padding-top: 15px; padding-bottom: 3px;"><strong>Scholarship Available</strong></td>
 </tr>
<tr>
<td> <ul>
<li>Biasiswa Sukan Persekutuan  <span id="sukan" 
onclick="DoReadMore('sukan','sukan1','sukan2');"  
style = "font-weight: bold; 
 font-size: small;
color: red;" value="Hide Column 1">
<nobr>[Read More]</nobr></span></li>

<div id="sukan2" 
style="display: none;">
// some info bout the scholar
</div>

<span 
  id="sukan1" 
   onclick="AbandonReadMore('sukan1','sukan2','sukan');" 
    style="display: none; 
    font-weight: bold;
	font-size: small;
   color: red;">
<nobr>[Read Less]</nobr></span>
</ul>
</td>

<td>
<ul><li>Bank Negara Malaysia Scholarship Award  <span id="bank" 
onclick="DoReadMore('bank','bank1','bank2');"  
 style = "font-weight: bold; 
 font-size: small;
color: red;" value="Hide Column 0">
<nobr>[Read More]</nobr></span></li>

<div id="bank2" 
style="display: none;">
// some info bout the scholar
</div>
<span  id="bank1" 
onclick="AbandonReadMore('bank1','bank2','bank');" 
style="display: none; 
font-weight: bold;
font-size: small;
color: red;">
<nobr>[Read Less]</nobr></span>
</ul>
</td>
</tr>

// second row
<tr>
<td> <ul>
<li>British American Tobacco  <span id="british" 
onclick="DoReadMore('british','british1','british2');"  
style = "font-weight: bold; 
font-size: small;
color: red;" >
<nobr>[Read More]</nobr></span></li>

<div id="british2" 
style="display: none;">
// some info bout the scholar
</div>

<span id="british1" 
onclick="AbandonReadMore('british1','british2','british');" 
style="display: none; 
font-weight: bold;
font-size: small;
color: red;">
<nobr>[Read Less]</nobr></span>
</ul>
</td>

<td> <ul>
<li>Canon Scholarship Award <span id="canon" 
onclick="DoReadMore('canon','canon1','canon2');"  
 style = "font-weight: bold; 
 font-size: small;
color: red;" >
<nobr>[Read More]</nobr></span></li>

<div id="canon2" 
style="display: none;">
// some info bout the scholar
</div>

<span id="canon1" 
onclick="AbandonReadMore('canon1','canon2','canon');" 
 style="display: none; 
font-weight: bold;
font-size: small;
 color: red;">
<nobr>[Read Less]</nobr></span>
</ul>
</td>
</tr>
</tbody>
</table>
</table>
</body>
</html>

**JMRKER** · 03-24-2011 08:04 AM

What are you using for the function $ definition?
Posted script currently returns " not defined".

**JMRKER** · 03-24-2011 02:17 PM

From your code, I'm not sure why you are asking about hiding columns with your particular layout.

This is just a guess as to the results you are asking for:

Code:

<html>
<head>
<title>Read More Columns</title>
<style type="text/css">
  .readMore { display: block; font-weight: bold; font-size: small; color: red; }
</style>
</head>
<body>

<script type="text/javascript">
// From: http://www.webdeveloper.com/forum/showthread.php?p=1145750#post1145750

function ResetAllReadMore() {
  var listIDS = [];
  var sel = document.getElementById('id_of_table').getElementsByTagName('*');
  for (var i=0; i<sel.length; i++) {
    if ((sel[i].id != '') && (sel[i].id.indexOf('2') == -1)) { listIDS.push(sel[i].id); }
  }
  for (var i=0; i<listIDS.length; i++) {
    document.getElementById(listIDS[i]).style.display = 'block';
    document.getElementById(listIDS[i]+'2').style.display = 'none';
  }
}

function DoReadMore(IDS) {
  ResetAllReadMore();
  document.getElementById(IDS).style.display = 'none';
  document.getElementById(IDS+'2').style.display = 'block';
}

function AbandonReadMore(IDS) {
  ResetAllReadMore();
  document.getElementById(IDS).style.display = 'block';
  document.getElementById(IDS+'2').style.display = 'none';
}

</script>

<table width="629" border="1" cellpadding="10" cellspacing="0"
 bgcolor="#FFFFFF" style="border-top: 1px solid #DCDDDD;"> 
 <tr>
  <td> 

   <table id="id_of_table" cellspacing="0" cellpadding="0" border="0" width="100&#37;">
    <tbody>
     <tr>
      <td style="padding-top: 15px; padding-bottom: 3px;">
       <strong>Scholarship Available</strong>
      </td>
     </tr>
     <tr>
     <td valign="top">
      <ul>
       <li>Biasiswa Sukan Persekutuan  
        <span id="sukan" onclick="DoReadMore('sukan');" class="readMore">
         <nobr>[Read More]</nobr>
        </span>
       </li>
       <div id="sukan2" style="display: none;">
        some info bout the scholar
        <span onclick="AbandonReadMore('sukan');"  class="readMore">
         <nobr>[Read Less]</nobr>
        </span>
       </div>
      </ul>
     </td>
     <td valign="top">
      <ul>
       <li>Bank Negara Malaysia Scholarship Award
        <span id="bank" onclick="DoReadMore('bank');" class="readMore">
        <nobr>[Read More]</nobr>
        </span>
       </li>
       <div id="bank2" style="display: none;">
        some info bout the scholar
        <span onclick="AbandonReadMore('bank');" class="readMore">
         <nobr>[Read Less]</nobr>
        </span>
       </div>
      </ul>
     </td>
    </tr>

    <tr>
     <td valign="top">
      <ul>
       <li>British American Tobacco  
        <span id="british" onclick="DoReadMore('british');" class="readMore">
         <nobr>[Read More]</nobr></span>
        </li>
        <div id="british2" style="display: none;">
         some info bout the scholar
         <span oncick="AbandonReadMore('british');" class="readMore"> 
          <nobr>[Read Less]</nobr>
         </span>
        </div>
       </ul>
      </td>
      <td valign="top">
       <ul>
        <li>Canon Scholarship Award
         <span id="canon" onclick="DoReadMore('canon');" class="readMore">
          <nobr>[Read More]</nobr></span>
         </li>
        <div id="canon2" style="display: none;">
         some info bout the scholar
         <span onclick="AbandonReadMore('canon');" class="readMore">
          <nobr>[Read Less]</nobr>
         </span>
        </div>
       </ul>
      </td>
     </tr>
    </tbody>
   </table>

  </td>
 </tr>
</table>
</body>
</html>

Thread: hide column when click read more

Thread Tools

Display

hide column when click read more

Something to consider ...

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions