hide column when click read more

@nutsxieraMar 24.2011

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 ?

to post a comment

JavaScript

4 Comments(s) _↴

@JMRKERMar 24.2011 — #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.

@nutsxieraauthorMar 24.2011 — #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>
 
 
 [/CODE]

@JMRKERMar 24.2011 — #What are you using for the function $ definition?

Posted script currently returns " not defined".

@JMRKERMar 24.2011 — #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: :eek:

<i>
 </i>&lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;Read More Columns&lt;/title&gt;
 &lt;style type="text/css"&gt;
 .readMore { display: block; font-weight: bold; font-size: small; color: red; }
 &lt;/style&gt;
 &lt;/head&gt;
 &lt;body&gt;
 
 &lt;script type="text/javascript"&gt;
 // 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&lt;sel.length; i++) {
 if ((sel[i].id != '') &amp;&amp; (sel[i].id.indexOf('2') == -1)) { listIDS.push(sel[i].id); }
 }
 for (var i=0; i&lt;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';
 }
 
 &lt;/script&gt;
 
 &lt;table width="629" border="1" cellpadding="10" cellspacing="0"
 bgcolor="#FFFFFF" style="border-top: 1px solid #DCDDDD;"&gt; 
 &lt;tr&gt;
 &lt;td&gt; 
 
 &lt;table id="id_of_table" cellspacing="0" cellpadding="0" border="0" width="100&amp;#37;"&gt;
 &lt;tbody&gt;
 &lt;tr&gt;
 &lt;td style="padding-top: 15px; padding-bottom: 3px;"&gt;
 &lt;strong&gt;Scholarship Available&lt;/strong&gt;
 &lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td valign="top"&gt;
 &lt;ul&gt;
 &lt;li&gt;Biasiswa Sukan Persekutuan  <br/>
 &lt;span id="sukan" onclick="DoReadMore('sukan');" class="readMore"&gt;
 &lt;nobr&gt;[Read More]&lt;/nobr&gt;
 &lt;/span&gt;
 &lt;/li&gt;
 &lt;div id="sukan2" style="display: none;"&gt;
 some info bout the scholar
 &lt;span onclick="AbandonReadMore('sukan');"  class="readMore"&gt;
 &lt;nobr&gt;[Read Less]&lt;/nobr&gt;
 &lt;/span&gt;
 &lt;/div&gt;
 &lt;/ul&gt;
 &lt;/td&gt;
 &lt;td valign="top"&gt;
 &lt;ul&gt;
 &lt;li&gt;Bank Negara Malaysia Scholarship Award
 &lt;span id="bank" onclick="DoReadMore('bank');" class="readMore"&gt;
 &lt;nobr&gt;[Read More]&lt;/nobr&gt;
 &lt;/span&gt;
 &lt;/li&gt;
 &lt;div id="bank2" style="display: none;"&gt;
 some info bout the scholar
 &lt;span onclick="AbandonReadMore('bank');" class="readMore"&gt;
 &lt;nobr&gt;[Read Less]&lt;/nobr&gt;
 &lt;/span&gt;
 &lt;/div&gt;
 &lt;/ul&gt;
 &lt;/td&gt;
 &lt;/tr&gt;
 
 <i>    </i>&lt;tr&gt;
 <i>    </i> &lt;td valign="top"&gt;
 <i>    </i>  &lt;ul&gt;
 <i>    </i>   &lt;li&gt;British American Tobacco 
 <i>    </i>    &lt;span id="british" onclick="DoReadMore('british');" class="readMore"&gt;
 <i>    </i>     &lt;nobr&gt;[Read More]&lt;/nobr&gt;&lt;/span&gt;
 <i>    </i>    &lt;/li&gt;
 <i>    </i>    &lt;div id="british2" style="display: none;"&gt;
 <i>    </i>     some info bout the scholar
 <i>    </i>     &lt;span oncick="AbandonReadMore('british');" class="readMore"&gt; 
 <i>    </i>      &lt;nobr&gt;[Read Less]&lt;/nobr&gt;
 <i>    </i>     &lt;/span&gt;
 <i>    </i>    &lt;/div&gt;
 <i>    </i>   &lt;/ul&gt;
 <i>    </i>  &lt;/td&gt;
 <i>    </i>  &lt;td valign="top"&gt;
 <i>    </i>   &lt;ul&gt;
 <i>    </i>    &lt;li&gt;Canon Scholarship Award
 <i>    </i>     &lt;span id="canon" onclick="DoReadMore('canon');" class="readMore"&gt;
 <i>    </i>      &lt;nobr&gt;[Read More]&lt;/nobr&gt;&lt;/span&gt;
 <i>    </i>     &lt;/li&gt;
 <i>    </i>    &lt;div id="canon2" style="display: none;"&gt;
 <i>    </i>     some info bout the scholar
 <i>    </i>     &lt;span onclick="AbandonReadMore('canon');" class="readMore"&gt;
 <i>    </i>      &lt;nobr&gt;[Read Less]&lt;/nobr&gt;
 <i>    </i>     &lt;/span&gt;
 <i>    </i>    &lt;/div&gt;
 <i>    </i>   &lt;/ul&gt;
 <i>    </i>  &lt;/td&gt;
 <i>    </i> &lt;/tr&gt;
 <i>    </i>&lt;/tbody&gt;
 &lt;/table&gt;
 
 &lt;/td&gt;
 &lt;/tr&gt;
 &lt;/table&gt;
 &lt;/body&gt;
 &lt;/html&gt;

Also in #JavaScript _↴

Mouse rollover Validation not working in IE 4.0 [RESOLVED] opacity for div element as modal dialog background

Success!

Help @nutsxiera spread the word by sharing this article on Twitter...

Tweet This

hide column when click read more

4 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

hide column when click read more

4 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

4 Comments(s) _↴

Also in #JavaScript _↴