www.webdeveloper.com
Results 1 to 4 of 4

Thread: Hide/Show content

  1. #1
    Join Date
    Mar 2013
    Posts
    3

    Question Hide/Show content

    Hi all, so I want to create a news system only with JS. One of the core feature is to hide/show the content with buttons. As it is right now I have 2 questions:
    1. When I click on any button nothing happen on the first click but everything work when you click twice?
    2. I want to be able to Hide the content not only by month but also by date, I need help to start my function.

    Thank a lot in advance. Here's my code everything is in one file.

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="function.js" type="text/javascript" />
    <title>Test Javascript News</title>
    <style>
    h1{
    	font-size:14px;
    	font-weight:bold;
    	font-family:Verdana, Geneva, sans-serif;
    	text-decoration:underline;
    	}
    
    .month{
    	font-weight:bold;
    	font-size:14px;
    	padding:5px;
    	}
    	
    
    </style>
    
    <script language="javascript"> 
    <!--
    var state = 'none';
    
    function showhide(layer_ref) {
    
    if (state == 'block') { 
    state = 'none'; 
    } 
    else { 
    state = 'block'; 
    } 
    if (document.all) { //IS IE 4 or 5 (or 6 beta) 
    eval( "document.all." + layer_ref + ".style.display = state"); 
    } 
    if (document.layers) { //IS NETSCAPE 4 or below 
    document.layers[layer_ref].display = state; 
    } 
    if (document.getElementById &&!document.all) { 
    hza = document.getElementById(layer_ref); 
    hza.style.display = state; 
    } 
    } 
    //--> 
    </script> 
    </head>
    
    <body>
    
    <p><button onclick="showhide('january');">Show/hide me January</button></p> 
    
    
    <p><button onclick="showhide('february');">Show/hide me February</button></p> 
    
    <p><button onclick="showhide('March');">Show/hide me March</button></p> 
    
    
    
    <table width="524" height="396" border="1">
      <tr>
        <td><b>Month</b></td>
        <td><b>News</b></td>
        <td><b>Date</b></td>
      </tr>
      <tr>
        <td><span class="month">January</span></td>
        
        <td><div id="january">
        <span class="news">
       <h1>title</h1> 
       <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla felis eros, fermentum vitae molestie id, placerat ac diam. Nam eget tempor tellus. In hac habitasse platea dictumst. Fusce ut eros tellus, eget rutrum enim. Nulla facilisi. Curabitur tempor blandit blandit. Donec sit amet libero vitae quam commodo malesuada et sit amet sapien. Quisque sed erat sem, at adipiscing risus. </p>
        </span>
        
          <span class="news">
       <h1>title</h1> 
       <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla felis eros, fermentum vitae molestie id, placerat ac diam. Nam eget tempor tellus. In hac habitasse platea dictumst. Fusce ut eros tellus, eget rutrum enim. Nulla facilisi. Curabitur tempor blandit blandit. Donec sit amet libero vitae quam commodo malesuada et sit amet sapien. Quisque sed erat sem, at adipiscing risus. </p>
        </span>
        
          <span class="news">
       <h1>title</h1> 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla felis eros, fermentum vitae molestie id, placerat ac diam. Nam eget tempor tellus. In hac habitasse platea dictumst. Fusce ut eros tellus, eget rutrum enim. Nulla facilisi. Curabitur tempor blandit blandit. Donec sit amet libero vitae quam commodo malesuada et sit amet sapien. Quisque sed erat sem, at adipiscing risus. </p>
        </span>
        </div></td>  
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td><span class="month">February</span></td>
        <td><div id="february">
        
            <span class="news">
       <h1>title</h1> 
       <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla felis eros, fermentum vitae molestie id, placerat ac diam. Nam eget tempor tellus. In hac habitasse platea dictumst. Fusce ut eros tellus, eget rutrum enim. Nulla facilisi. Curabitur tempor blandit blandit. Donec sit amet libero vitae quam commodo malesuada et sit amet sapien. Quisque sed erat sem, at adipiscing risus. </p>
        </span>
        
          <span class="news">
       <h1>title</h1> 
       <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla felis eros, fermentum vitae molestie id, placerat ac diam. Nam eget tempor tellus. In hac habitasse platea dictumst. Fusce ut eros tellus, eget rutrum enim. Nulla facilisi. Curabitur tempor blandit blandit. Donec sit amet libero vitae quam commodo malesuada et sit amet sapien. Quisque sed erat sem, at adipiscing risus. </p>
        </span>
        
          <span class="news">
       <h1>title</h1> 
       <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla felis eros, fermentum vitae molestie id, placerat ac diam. Nam eget tempor tellus. In hac habitasse platea dictumst. Fusce ut eros tellus, eget rutrum enim. Nulla facilisi. Curabitur tempor blandit blandit. Donec sit amet libero vitae quam commodo malesuada et sit amet sapien. Quisque sed erat sem, at adipiscing risus. </p>
        </span>
        
        
        </div> </td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td><span class="month">March</span></td>
        <td><div id="March">
        
               <span class="news">
       <h1>title</h1> 
       <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla felis eros, fermentum vitae molestie id, placerat ac diam. Nam eget tempor tellus. In hac habitasse platea dictumst. Fusce ut eros tellus, eget rutrum enim. Nulla facilisi. Curabitur tempor blandit blandit. Donec sit amet libero vitae quam commodo malesuada et sit amet sapien. Quisque sed erat sem, at adipiscing risus. </p>
        </span>
        
          <span class="news">
       <h1>title</h1> 
       <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla felis eros, fermentum vitae molestie id, placerat ac diam. Nam eget tempor tellus. In hac habitasse platea dictumst. Fusce ut eros tellus, eget rutrum enim. Nulla facilisi. Curabitur tempor blandit blandit. Donec sit amet libero vitae quam commodo malesuada et sit amet sapien. Quisque sed erat sem, at adipiscing risus. </p>
        </span>
        
          <span class="news">
       <h1>title</h1> 
       <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla felis eros, fermentum vitae molestie id, placerat ac diam. Nam eget tempor tellus. In hac habitasse platea dictumst. Fusce ut eros tellus, eget rutrum enim. Nulla facilisi. Curabitur tempor blandit blandit. Donec sit amet libero vitae quam commodo malesuada et sit amet sapien. Quisque sed erat sem, at adipiscing risus. </p>
        </span>
        </div></td>
        <td>&nbsp;</td>
      </tr>
    </table>
    
    
    
    </body>
    </html>

  2. #2
    Join Date
    Mar 2013
    Posts
    3
    Answer anyone?

  3. #3
    Join Date
    Feb 2013
    Posts
    5
    The problem in the code is "state" variable. It is set as a global variable and its default value is "none", so in the first click the function will not hide the opened section and it will only set the value of "state" to "block":
    HTML Code:
    else { 
    state = 'block';
    And after the first click the state variable will will only reflect the state of the last element. So if you hided january, the variable "state" will be "none". Now if february is opened and you click to hide it what will happen is exactly what happened in the first click (it will only set the value of "state" to "block").
    That's why you need to click twice.

    The method that I apply to achive close/open is to define a class
    HTML Code:
    .hide {display:none;}
    then I add or remove the class. I wrote a function for your code and tried it successfully:
    HTML Code:
    function addRemoveClass (cl,elm) {
    	elmClass= elm.className;
    	elmClasses= elmClass.split(' ');
    	classCkeck= false;
    	classItem=false;
    	for (var i=0; i<elmClasses.length; i++){
    		if (elmClasses[i]==cl){
    			classCkeck= true;
    			classItem= i;
    			break;
    		}
    	}
    	if (classCkeck) {
    		elmClasses[classItem]= null;
    		} else {
    			elmClasses.push(cl);
    		}
    	newClass= elmClasses.join(' ');
    	if (newClass.charAt(0)==' ') {
    		newClass= newClass.substring(1);
    	}
    	if (newClass.charAt(newClass.length-1)==' ') {
    		newClass= newClass.substring(0,newClass.length-1);
    	}
    	elm.className= newClass;
    }
    Now you only need to send the element and the class of hide to this function. Example:
    HTML Code:
    elm= getElementById ('february');
    cl= 'hide'
    addRemoveClass(cl,elm);
    2. I want to be able to Hide the content not only by month but also by date, I need help to start my function.
    You can apply the same logic for that. But i prefer using the addEventListener method for events.

  4. #4
    Join Date
    Mar 2013
    Posts
    3
    work like a charm thanks pal

Thread Information

Users Browsing this Thread

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

Tags for this Thread

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