I have a fetched with php as an array and it is categorized. See code:

 

 <table><?php 
        $cat_set = get_all_cats();
        while($category = mysql_fetch_array($cat_set)){
            
            if($category["category"] != "no-cat"){
                echo "<tr colspam=\"2\"><td></td><td id=\"cats\">".$category["category"]."<td><img id=\"blink\" src=\"drop.png\"></td></td></tr>";
                $course_set = get_courses_for_cats($category["cat_id"]);
                    while ($course = mysql_fetch_array($course_set)) {
                    echo"<tr class=\"cont\"><td><input value = ". $course["course_code"] ." name=\"boxes[]\" type=\"checkbox\"></td><td class=\"code\">" . $course["course_code"] . "</td></tr></input>";


                    }


            }
            else {
                $course_set = get_courses_for_cats($category["cat_id"]);
                    while ($course = mysql_fetch_array($course_set)) {
                    echo"<tr class=\"cont\"><td><input value = ". $course["course_code"] ." name=\"boxes[]\" type=\"checkbox\"></td><td class=\"code\">" . $course["course_code"] . "</td></tr></input>";


                }
            } 
        }
            ?>
            </table>
So every course has a categoty.
Now what I want to do is to use jquery to hide the course unless its category is clicked an this is what i have achieved


    <script>
        $(document).ready(function(){
            $(".cont").hide();
            $("#cats").click(function(){
                $(".cont").toggle();
            });
        })
    
        </script>
 

 

but it when i click the category it hides all the courses even those that does not belong to itself. I know if the categories had different ids it would have been better but because it is an array, one id serves them all. Please any idea on how i can fix this. Thanks

Edited April 7, 201412 yr by Lyndsey
added code tags

can you give us the output your php query makes?

Find attached a screenshot of the php result, If I click on 1 category, i want it to expand only its courses but expands all. Thanks

Edited April 7, 201412 yr by chris92

LYNDSEY where did u add code tags please

Hiya,

 

When posting code, ensure you use the code tags as it's a lot easier for us to read

 

I'd probably use some classes and data attributes. Something like this:

 

http://jsfiddle.net/LyndseyB/LfA8Q/

 

However, you'd probably be better off not using a table and using some divs. Would be easier to target elements without using multiple classes etc.

 

Hey Chris, code tags are located on the text editor (circled below):

 

 

Hope this helps.

Edited April 7, 201412 yr by Lyndsey

Thats exactly my problem. I just updated the link. take a look at it. It is an array of data an it has the same html attribute cause it generated by just one line of code

Hiya,

 

When posting code, ensure you use the code tags as it's a lot easier for us to read

 

I'd probably use some classes and data attributes. Something like this:

 

http://jsfiddle.net/LyndseyB/LfA8Q/

 

However, you'd probably be better off not using a table and using some divs. Would be easier to target elements without using multiple classes etc.

 

Hey Chris, code tags are located on the text editor (circled below):

 

Capture.PNG

 

Hope this helps.

If I change the data-show all to content1, the issue persists. Do you have any idea on how to fix that? Thanks

 

    <table>
        <?php 
            $cat_set = get_all_cats();
            while($category = mysql_fetch_array($cat_set)){
                
                if($category["category"] != "no-cat"){
                
                    echo "
                    <tr data-show=\"".$category["category"]."\">
                        <td id=\"cats\">".$category["category"]."</td>
                        <td><img id=\"blink\" src=\"drop.png\"></td>
                    </tr>";
                    
                    $course_set = get_courses_for_cats($category["cat_id"]);
                        while ($course = mysql_fetch_array($course_set)) {
                        echo"
                        <tr class=\"cont\" data-cat=\"".$category["category"]."\">
                            <td><input value = ". $course["course_code"] ." name=\"boxes[]\" type=\"checkbox\" /></td>
                            <td class=\"code\">" . $course["course_code"] . "</td>
                        </tr>";
                    }
 
 
                } else {
                
                    $course_set = get_courses_for_cats($category["cat_id"]);
                        while ($course = mysql_fetch_array($course_set)) {
                        echo"
                        <tr class=\"cont\" data-cat=\"".$category["category"]."\">
                            <td><input value = ". $course["course_code"] ." name=\"boxes[]\" type=\"checkbox\" /></td>
                            <td class=\"code\">" . $course["course_code"] . "</td>
                        </tr>";
                    }
                    
                } 
                
            }
        ?>
    </table>
 
 
    <script>
        $(document).ready(function(){
            $(".cont").hide();
            $("[data-show]").click(function(){
                var selector = $(this).attr("data-show");
                $("[data-cat='"+selector+"']").toggle();
            });
        });
    </script>

I am looking at embedding the courses "id" from the database using php into the id in html. I think it will work but i dont know how. Thanks as you help

 

    <table>
        <?php 
            $cat_set = get_all_cats();
            while($category = mysql_fetch_array($cat_set)){
                
                if($category["category"] != "no-cat"){
                
                    echo "
                    <tr data-show=\"".$category["category"]."\">
                        <td id=\"cats\">".$category["category"]."</td>
                        <td><img id=\"blink\" src=\"drop.png\"></td>
                    </tr>";
                    
                    $course_set = get_courses_for_cats($category["cat_id"]);
                        while ($course = mysql_fetch_array($course_set)) {
                        echo"
                        <tr class=\"cont\" data-cat=\"".$category["category"]."\">
                            <td><input value = ". $course["course_code"] ." name=\"boxes[]\" type=\"checkbox\" /></td>
                            <td class=\"code\">" . $course["course_code"] . "</td>
                        </tr>";
                    }
 
 
                } else {
                
                    $course_set = get_courses_for_cats($category["cat_id"]);
                        while ($course = mysql_fetch_array($course_set)) {
                        echo"
                        <tr class=\"cont\" data-cat=\"".$category["category"]."\">
                            <td><input value = ". $course["course_code"] ." name=\"boxes[]\" type=\"checkbox\" /></td>
                            <td class=\"code\">" . $course["course_code"] . "</td>
                        </tr>";
                    }
                    
                } 
                
            }
        ?>
    </table>
 
 
    <script>
        $(document).ready(function(){
            $(".cont").hide();
            $("[data-show]").click(function(){
                var selector = $(this).attr("data-show");
                $("[data-cat='"+selector+"']").toggle();
            });
        });
    </script>

Please can you explain to me what you did? Tnx a lot for trying to help

Well the category row i gave an attribute called data-show="{categoryName}" and then each row for that category i gave an attribute data-cat="{categoryName}"

 

What then the JQuery does when you click on the category it finds the value of its data-show attribute it then toggles all of the elements with a data-cat attribute that is equal to the data-show attribute

Well the category row i gave an attribute called data-show="{categoryName}" and then each row for that category i gave an attribute data-cat="{categoryName}"

 

What then the JQuery does when you click on the category it finds the value of its data-show attribute it then toggles all of the elements with a data-cat attribute that is equal to the data-show attribute

KK. Let me try this, I ll get back to you. I am really gratefull pal

Well the category row i gave an attribute called data-show="{categoryName}" and then each row for that category i gave an attribute data-cat="{categoryName}"

 

What then the JQuery does when you click on the category it finds the value of its data-show attribute it then toggles all of the elements with a data-cat attribute that is equal to the data-show attribute

 

Please can you explain to me what you did? Tnx a lot for trying to help

Damn.... This guy is a genius. Thanks a lot man. You just made my day. I owe U 1.

Thanks Again........

No problem, glad i could help