www.webdeveloper.com
Results 1 to 5 of 5

Thread: hide column when click read more

  1. #1
    Join Date
    Mar 2011
    Posts
    2

    hide column when click read more

    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

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,377
    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.

  3. #3
    Join Date
    Mar 2011
    Posts
    2
    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>

  4. #4
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,377
    What are you using for the function $ definition?
    Posted script currently returns " not defined".

  5. #5
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,377

    Lightbulb Something to consider ...

    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>
    Last edited by JMRKER; 03-24-2011 at 02:45 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles