Toggle show/hide div with button for multiple result

1
votes

i am developing a classroom students attendance site, what i am doing and what i expected my php coding, its working fine... when update attendance each student just click over each student thumbnails from students list page, its working...

my question is i had added a add description button for each students over thumbnails, its invisible, when user hover mouse over student thumbnails only show this button, then i had added a toggle show/hide div with button, when user click this visible button my small form div will display...

this is i used for toggle show/hide div with button...

HTML

<div id='content'>form content here</div>
<input type='button' id='hideshow' value='add description'>

Jquery

jQuery(document).ready(function(){
    jQuery('#hideshow').live('click', function(event) {        
         jQuery('#content').toggle('show');
    });
});

its working when click add description button, but my problem is if i have more than 2 or above students my list when i click this button all students form content div display now, i need only one student div display, i mean which student above button we click, only that display... i think this problem because of used unique id, how to fix it.? any idea.???

EDIT this is my php generated students list display

<?php if ($students) { ?>
        <?php foreach ($students as $student) { ?>    
        <div class="student">
        <div class="thumb">
        <div class="content" style="display:none;">
            DIV CONTENT HERE
        </div>
        <input type='button' id='hideshow' value='add description'>    
        <img class="img" src="<?php echo $student['image']; ?>" alt="<?php echo $student['name']; ?>" />
        </div>    
        <div class="name"><?php echo $student['name']; ?><?php echo $student['student_id']; ?></div> 
        </div>
       <?php } else { ?>
    <div class="empty"><?php echo $text_empty; ?></div>
    <?php } ?>
<?php } ?>

this is the screenshot what i got now... enter image description here

this is what i really looking for enter image description here

thanks...

2
javascriptjqueryhtmlformsshow-hide

2 Answers

1
votes

I think I understand your problem. Try using prev() to get the previous sibling and use class="content" not id as there are multiple.

Also .live() has been deprecated, prefer .on() since .live() was removed in v1.9.

JS

jQuery(document).ready(function(){
    jQuery('#hideshow').on('click', function(event) {        
         jQuery(this).prev('.content').toggle('show');
    });
});

HTML

<div class='content'>form content here</div>
<input type='button' id='hideshow' value='add description'>

Update

Now that you include your PHP I understand the problem. The issue is that you're using an id for hideshow, ids are supposed to be unique and I believe jQuery actually stops checking if there are more than one. Try this:

HTML

<div class='content'>form content here</div>
<input type='button' class='hideshow' value='add description'>

JS

jQuery(document).ready(function(){
    jQuery('.hideshow').on('click', function(event) {        
         jQuery(this).prev('.content').toggle();
    });
});

So the differences to my original answer is that it's not using the class .hideshow, not an id, and we're simply calling .toggle() to show/hide instead of using the CSS class .show.

0
votes

Try to loop for multiple students like

foreach($total_stndts as $row)
{
    echo "<div class='content_<?php echo $row['stdnt_id'];?>'>form content here</div>";
    echo "<input type='button' id='<?php echo $row['stdnt_id'];?>' value='add description'>";   
}

then in your jquery try to fire like

$("input[type='button']").live('click',function(){
    id = $(this).attr('id');
    $('#content_'+id).toggle('show');  
})