jQuery/PHP : Show/Hide with dynamic id -
i want show/hide using dynamic id using php, able select , display right div id, when click on edit-course displaying div, displaying div should close , show new div, couldn't open edit-course div, here code
<?php require 'init.php'; ?> <html> <head> <script src="js/jqueryv1.10.2.js"></script> <script> $ (function() { $ ('#selector').change(function() { $ ('.colors').hide(); $ ('#' + $(this).val()).fadein('slow'); }); }); $(function() { $('.show-hide-action').click(function() { // bind action $ ('.colors').hide(); $ ('#enclosure' + $(this).val()).fadein('slow'); }); }); </script> </head> <body> <?php echo '<div style="color:#8ac007;margin:30px;text-align:center;"> select course of study : <select id="selector">'; $sel_course = $db->query('select * courses'); $sel_course->execute(); echo '<option selected="selected">select course</option>'; while ($row = $sel_course->fetch(pdo::fetch_assoc)) { $course_name = $row['course_name']; $id = $row['id']; echo '<option value='.$id.'>'.$course_name.'</option>'; } echo '</select>'; echo '</div>'; //displaying content $dis_course = $db->query('select * courses'); $dis_course->execute(); while ($row = $dis_course->fetch(pdo::fetch_assoc)) { $course_name = $row['course_name']; $course_id = $row['id']; echo '<div id='.$course_id.' style="display:none;" class="colors">'; echo ''.$course_name.'(<a class="show-hide-action" style="cursor:pointer;">edit course of study </a>)'; echo '</div>'; echo '<div id="enclosure('.$course_id.')" style="display:none;">'. $course_name.' </div>'; } ?> </body> </html>
create wrapping div.
echo "<div class='wrapper'>"; echo '<div id='.$course_id.' style="display:none;" class="colors">'; echo ''.$course_name.'(<a class="show-hide-action" style="cursor:pointer;">edit course of study </a>)'; echo '</div>'; echo '<div class="enclosure" style="display:none;">'. $course_name.' </div>'; echo "</div>"; and alter script this:
$(function() { $('.show-hide-action').click(function() { // bind action $ ('.enclosure').hide(); $ (this).closest('.wrapper').find('.enclosure').fadein('slow'); }); }); php jquery
No comments:
Post a Comment