jQuery Forum

Hi everyone,


I am new to jQuery. I am loading all data from the database, creating a list, and then I am trying to make each element showing/hiding dynamically. In the beginning is used the switch statement, but I forgot that I couldn't hide the div again. So I am looking for a properly way of doing it..

Here is the php

<code>
<?php

function get_all_recipes(){
    $query  = "SELECT * FROM opskrifter";
    $result = mysql_query($query);
  
    while($info = mysql_fetch_array($result))
 
    {
               
        echo "
                <li class=\"click\" id=\"opskrift".$info['id']."\">".$info['navn']."</li>
                <li id=\"rating\">5 stars</li>
                <li id=\"time\">".$info['tilberedningstid']."</li>
                <li id=\"fb_like\">19 likes</li>       
           
            <div id=\"opskrift".$info['id']."_indhold\">here goes the content for recipe ".$info['id']."</div>
            ";
       
    }   
}
?>

</code>

This is the jquery code which is working, but I can't hide the content again... lalala

<code>
$(document).ready(function(){
   
        //References

    var sections = $("#recipe_header li");
    var loading = $("#loading");
   
   
    //Manage click events
    sections.click(function(){
           
        var pos = this.id;
        var content = $("#"+pos+"_indhold");

        //show the loading bar
        showLoading();
        //load selected section
        switch (pos) {
            case (pos):
                content.slideUp();
                content.load("show_recipe.php #loaded_"+pos, hideLoading);
                content.slideDown();
                break;
            default:
                //hide loading bar if there is no selected section
                hideLoading();
                break;
        }
    });

    //show loading bar
    function showLoading(){
        loading
            .css({visibility:"visible"})
            .css({opacity:"1"})
            .css({display:"block"})
        ;
    }
    //hide loading bar
    function hideLoading(){
        loading.fadeTo(1000, 0);
                                   
    };            
});
</code>

And this is for the jquery with hide/show, which is not working :( :

    <code>
        <script type="text/javascript">
            $(document).ready(function() {
               
                var sections = $("#recipe_header li");
            
            sections.click(function(){
                //references
                var pos = this.id;
                var content = $("#"+pos+"_indhold");

                //shows and hides the div on click
                pos.click(function() {
                  (content).toggle(400);
                  (content).load("show_recipe.php #loaded_"+pos, hideLoading);
                  return false;
                });
            });
           });
           
            </script>
</code>

Anyone has a better idea?

Thanks in regards