Nooby Javascript/PHP Hidden Div Problems

[Foxtrck]

Hi, I'm trying to implement hidden content for a site in php.

PHP looks like this

PHP Code:

            for($i=0; $i<$num_rows_publication; $i++)
            {
                echo ("<a href=\"javascript:unhide('content')\">" . mysql_result($result_publication, $i, "pubName") . "</a>");
                                        
                
                $query_files = "SELECT * FROM files WHERE pubId = " . 
                mysql_result($result_publication, $i, "id") . " ORDER BY files.language";
                        
                        $result_languages = mysql_query($query_files) or die(mysql_error()); 
                        
                        $num_rows_languages = mysql_num_rows($result_languages);
                        
                        for($j=0; $j<$num_rows_languages;$j++)
                        {                
                            echo("<div id='content' class='hidden'>");
                            echo("<table>");                        
                            echo("<tr><td class='language'><a href='" . mysql_result($result_languages, $j, "file") . "'>" . mysql_result($result_languages, $j, "language") . "</a></td></tr>");
                            echo("</table>");
                            echo("</div>");
                        }
                        
                echo("<hr/>");
            } 


So Ive got a heading and use that as a link to hide/show results from the database.

Javascript fot that is:

<script type="text/javascript">
function unhide(divID) {
var item = document.getElementById(divID);
if (item) {
item.className=(item.className=='hidden')?'unhidde n':'hidden';
}
}
</script>

and two classes hidden/unhidden.

It doesnt really work and im having big problems trying to implement this in the php areas.

Any suggestions?

[Izzmo]

Instead of doing a class, why not just change the block's style.display attribute? You can change it from block (to show it) and none (to hide it).

This will also get rid of the space it takes up when visible.

So try this and see if it works:

<script type="text/javascript">
function unhide(divID) {
var item = document.getElementById(divID);
if (item) {
item.style.display=(item.style.display=='block')?'none':'block';
}
}
</script>

PHP Code:

            for($i=0; $i<$num_rows_publication; $i++) 
            { 
                echo ("<a href=\"javascript:unhide('content')\">" . mysql_result($result_publication, $i, "pubName") . "</a>"); 
                                         
                 
                $query_files = "SELECT * FROM files WHERE pubId = " .  
                mysql_result($result_publication, $i, "id") . " ORDER BY files.language"; 
                         
                        $result_languages = mysql_query($query_files) or die(mysql_error());  
                         
                        $num_rows_languages = mysql_num_rows($result_languages); 
                         
                        for($j=0; $j<$num_rows_languages;$j++) 
                        {                 
                            echo("<div id='content'>"); 
                            echo("<table>");                         
                            echo("<tr><td class='language'><a href='" . mysql_result($result_languages, $j, "file") . "'>" . mysql_result($result_languages, $j, "language") . "</a></td></tr>"); 
                            echo("</table>"); 
                            echo("</div>"); 
                        } 
                         
                echo("<hr/>"); 
            } 


[Foxtrck]

Hi thanks for the reply, i tried it and it doesnt seem to work just hide the link itself. Is there any way to set the block up of

PHP Code:

 for($j=0; $j<$num_rows_languages;$j++)  
                        {                  
                            echo("<div id='content'>");  
                            echo("<table>");                          
                            echo("<tr><td class='language'><a href='" . mysql_result($result_languages, $j, "file") . "'>" . mysql_result($result_languages, $j, "language") . "</a></td></tr>");  
                            echo("</table>");  
                            echo("</div>");  
                        } 


to hidden, there will be many of these divs so cant be unique, and have an element outside the loop somewhere else to hide/show this?

[Costin Trifan]

if you want to hide/show the content then you should only hide/show the table tag and not the whole div, because this could help you add an event listener to that div so you can click on that div to toggle the table's visibility.

#1: search for a javascript function that will help you get a list of elements by class (if I remember correctly Dustin Diaz had published an article with a lot of useful functions)

#2: add the css class again to your div, this will help you select them

#3: create the toggle function

#4: or you can just use jquery or any other library you know how to use

[Foxtrck]

Do you havre any example of how i could implement it? It isnt quite working as i hoped.

[Foxtrck]

Ok, so I used this php

PHP Code:

$result_publication = mysql_query($query_publications) or die(mysql_error()); 
        $num_rows_publication = mysql_num_rows($result_publication);
        header_search_results();

               for($i=0; $i<$num_rows_publication; $i++) 
            { 
                echo ("<p>" . mysql_result($result_publication, $i, "pubName") . "<a id='displayText' href='javascript:toggle();'> Show Available Languages</a></p>");
         
                 
                $query_files = "SELECT * FROM files WHERE pubId = " .  
                mysql_result($result_publication, $i, "id") . " ORDER BY files.language"; 
                         
                        $result_languages = mysql_query($query_files) or die(mysql_error());  
                         
                        $num_rows_languages = mysql_num_rows($result_languages); 
                         echo("<div id='toggleText' style='display:none'>"); 
                        for($j=0; $j<$num_rows_languages;$j++) 
                        {                 
                            
                            echo("<table>");                         
                            echo("<tr><td class='language'>
                            <a href='" . mysql_result($result_languages, $j, "file") . "'>" . mysql_result($result_languages, $j, "language") . "</a></td></tr>"); 
                            echo("</table>"); 
                             
                        } 
                         echo("</div>");
                echo("<hr/>"); 
            }  


    } 


with the following JS

<script language="javascript"> 
function toggle() {
	var ele = document.getElementById("toggleText");
	var text = document.getElementById("displayText");
	if(ele.style.display == "block") {
    		ele.style.display = "none";
		text.innerHTML = "Show Available Languages";
  	}
	else {
		ele.style.display = "block";
		text.innerHTML = "Hide Languages";
	}
} 
</script>

and the concept works with hidding divs


BUT the problem is, only the first result uses the hiding div. Is there a way to loop through every one? How would i change it to search by class?

Sorry, any suggestions... lack of sleep is making me this noobish again

[Izzmo]

This should work for you.

You just have to create a counter in the PHP and then add that count to the id.

I have updated the JavaScript slightly as well.

<script language="javascript"> 
function toggle(num) {
	var ele = document.getElementById("toggleText"+num);
	var text = document.getElementById("displayText"+num);
	if(ele.style.display == "block") {
    		ele.style.display = "none";
		text.innerHTML = "Show Available Languages";
  	}
	else {
		ele.style.display = "block";
		text.innerHTML = "Hide Languages";
	}
} 
</script>

PHP Code:

$result_publication = mysql_query($query_publications) or die(mysql_error());  
        $num_rows_publication = mysql_num_rows($result_publication); 
        header_search_results(); 
        $count = 0;

               for($i=0; $i<$num_rows_publication; $i++)  
            {  
                $count++;
                echo ("<p>" . mysql_result($result_publication, $i, "pubName") . "<a id='displayText".$count."' href='javascript:toggle(".$count.");'> Show Available Languages</a></p>"); 
          
                  
                $query_files = "SELECT * FROM files WHERE pubId = " .   
                mysql_result($result_publication, $i, "id") . " ORDER BY files.language";  
                          
                        $result_languages = mysql_query($query_files) or die(mysql_error());   
                          
                        $num_rows_languages = mysql_num_rows($result_languages);  
                         echo("<div id='toggleText".$count."' style='display:none'>");  
                        for($j=0; $j<$num_rows_languages;$j++)  
                        {                  
                             
                            echo("<table>");                          
                            echo("<tr><td class='language'> 
                            <a href='" . mysql_result($result_languages, $j, "file") . "'>" . mysql_result($result_languages, $j, "language") . "</a></td></tr>");  
                            echo("</table>");  
                              
                        }  
                         echo("</div>"); 
                echo("<hr/>");  
            }   


    } 


[Foxtrck]

worked a treat izzmo, many thanks - it was so obvious in hindsight.