I have created 2 Div, 1 Div is hidden and visible when i click on the Parent Div. These Div's are in a php foreach Loop, so there can be many number of Divs.

I have written the following code, Its working fine for the first result only, and not affecting the rest results.

Kindly check it and guide me.

Thanks

<script>
    $(document).ready(function (e) {
        $('#course_details').hide();
        if ($('#course_details').hide()) {
            $('#expand').click(function () {
                $('#course_details').show();
            });
        } else {
            $('#expand').click(function () {
                $('#course_details').hide();
            });
        }
    });
</script>

PHP

    foreach ($past_course as $course_records)
    {
        $course_name= $course_records->CourseName;

        $AssignmentMarks= $course_records->AssignmentMarks;
        $QuizMarks=     $course_records->QuizMarks;

       <div id="expand">        
            <h3><?php echo $course_name ?> </h3>    
        </div>

        <div id="course_details" >

            <table border="1">
                <tr>
                    <th>
                        Assignment Marks
                    </th>
                    <td>
                        <?php echo $AssignmentMarks;    ?>
                    </td>
                </tr>


                <tr>
                    <th>
                        Quiz Marks
                    </th>
                    <td>
                        <?php echo $QuizMarks;  ?>
                    </td>
                </tr>

        </div>

<?php               

        } //foreach Loop End!
?>

I have created 2 Div, 1 Div is hidden and visible when i click on the Parent Div. These Div's are in a php foreach Loop, so there can be many number of Divs.

I have written the following code, Its working fine for the first result only, and not affecting the rest results.

Kindly check it and guide me.

Thanks

<script>
    $(document).ready(function (e) {
        $('#course_details').hide();
        if ($('#course_details').hide()) {
            $('#expand').click(function () {
                $('#course_details').show();
            });
        } else {
            $('#expand').click(function () {
                $('#course_details').hide();
            });
        }
    });
</script>

PHP

    foreach ($past_course as $course_records)
    {
        $course_name= $course_records->CourseName;

        $AssignmentMarks= $course_records->AssignmentMarks;
        $QuizMarks=     $course_records->QuizMarks;

       <div id="expand">        
            <h3><?php echo $course_name ?> </h3>    
        </div>

        <div id="course_details" >

            <table border="1">
                <tr>
                    <th>
                        Assignment Marks
                    </th>
                    <td>
                        <?php echo $AssignmentMarks;    ?>
                    </td>
                </tr>


                <tr>
                    <th>
                        Quiz Marks
                    </th>
                    <td>
                        <?php echo $QuizMarks;  ?>
                    </td>
                </tr>

        </div>

<?php               

        } //foreach Loop End!
?>

• javascript
• php
• jquery
• html

• 1 First of all, make sure you creating unique ID's for each div, orelse your click event will not behave as you expecting – FosterZ Commented Apr 4, 2014 at 11:54

5 Answers 5

HTML ID's need to be unique (only one per page).

You should try using classes rather than ID's for this purpose (e.g. looped output)

EDIT:

You could also try using the html data-id property which does not need to be unique if you really wanted to.

An id must be unique within a document.

If you want to define a class of elements, then do so with classes, not non-unique identifiers.

(You can probably hack this by using attribute selectors, $('[id=course_details]'), but I wouldn't remend it)

Firstly if you are going to have multiple instances of expand and course_details divs, you should not set these as ids. Use classes instead.

Then for your javascript, try something like this

$(document).ready(function(){
    $('.course_details').hide();
    $('.expand').on('click',function(){
       if($(this).next('.course_details').is(":visible")){
           $(this).next('.course_details').hide();
       } else {
           $(this).next('.course_details').show();
       }
    });
});

Please see Fiddle here

An id should be unique, try this using class:

Here i use var id = $(this).attr('id'); to show the only div that i want

    $(document).ready(function(e) {
        $('.course_details').hide();

    if($('.course_details').hide())
    {           
        $('.expand').click(function() { 
            var id = $(this).attr('id');
            $('#course_details' + id).show();            
            });             

    }

    else 
    {       $('.expand').click(function() {  
               var id = $(this).attr('id');       
               $('#course_details' + id).hide();            
            });         
    }

    });

</script>

But here you need to vinculate the div expand with the div course_details, i put the same id using $i

i = 0;
foreach ($past_course as $course_records)
    {
        $course_name= $course_records->CourseName;

        $AssignmentMarks= $course_records->AssignmentMarks;
        $QuizMarks=     $course_records->QuizMarks;

       <div class="expand" id="<?php echo $i ?>">        
            <h3><?php echo $course_name ?> </h3>    
        </div>

        <div class="course_details" id="course_details<?php echo $i ?>" >

            <table border="1">
                <tr>
                    <th>
                        Assignment Marks
                    </th>
                    <td>
                        <?php echo $AssignmentMarks;    ?>
                    </td>
                </tr>


                <tr>
                    <th>
                        Quiz Marks
                    </th>
                    <td>
                        <?php echo $QuizMarks;  ?>
                    </td>
                </tr>

        </div>

<?php               
            i++;
        } //foreach Loop End!
?>

please refer this code snippet at JsFiddle which will help you understand your problem in achieving, I didn't solve all of your problem above mentioned as I want you to learn and figure it out by yourself.

$('div[id^="course_details"]').hide();
$('div[id^="expand"]').click(function(){
    $(this).next().show();
})