Show / hide div?

Question

Hi i've made a calendar which have events but the problem is i can't fix the click on the event as you can see here on month of september i've events i can see events with the :hover css , made a Jquery function but i can't like click on radio button or something

http://esig-sandbox.ch/paintball/calendrierClient2.php I want to show the class="info"

Thanks for your help :)

 $(document).on('click', '.toggleNextInfo', function () { $(this).parent().find('.info').toggle(); });

 /*[fmt]0020-000A-3*/ body{ background:#EEEEEE; letter-spacing:1px; font-family:Helvetica; padding:10px;} .year{ color:#D90000; font-size:85px;} .relative{ position:relative;} .months{} .month{ margin-top:12px;} .months ul{ list-style:none; margin:0px; padding:0px;} .months ul li a{ float:left; margin:-1px; padding:0px 15px 0px 0px; color:#888888; text-decoration:none; font-size:35px; font-weight:bold; text-transform:uppercase;} .months ul li a:hover, .months ul li a.active{ color:#D90000;} table{ border-collapse:collapse;} table td{ border:1px solid #A3A3A3; width:80px; height:80px;} table td.today{ border:2px solid #D90000; width:80px; height:80px;} table td.padding{ border:none;} table td:hover{ background:#DFDFDF; cursor:pointer;} table th{ font-weight:normal; color:#A8A8A8;} table td .day{ position:absolute; color:#8C8C8C; bottom:-40px; right:5px; font-weight:bold; font-size:24.3pt;} table td .events{ position:relative; width:79px; height:0px; margin:-39px 0px 0px; padding:0px;} table td .events li{ width:10px; height:10px; float:left; background:#000; /*+border-radius:10px;*/ -moz-border-radius:10px; -webkit-border-radius:10px; -khtml-border-radius:10px; border-radius:10px 10px 10px 10px; margin-left:6px; overflow:hidden; text-indent:-3000px;} table td:hover .events{ position:absolute; left:582px; top:66px; width:442px; list-style:none; margin:0px; padding:11px 0px 0px;} table td:hover .events li{ height:40px; line-height:40px; font-weight:bold; border-bottom:1px solid #D6D6D6; padding-left:41px; text-indent:0; background:none; width:500px; } table td .events li:first-child{ border-top:1px solid #D6D6D6;} table td .daytitle{ display:none;} table td:hover .daytitle{ position:absolute; left:582px; top:21px; width:442px; list-style:none; margin:0px 0px 0px 16px; padding:0px; color:#D90000; font-size:41px; display:block; font-weight:bold;} .clear{ clear:both;}

 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="icon" href="images/date.ico" /> <title>Calendrier</title> <link rel="stylesheet" type="text/css" href="style5.css" /> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script type="text/javascript"> jQuery(function($){ $('.month').hide(); $('.month:first').show(); $('.months a:first').addClass('active'); var current = 1; $('.months a').click(function(){ var month = $(this).attr('id').replace('linkMonth',''); if(month != current){ $('#month'+current).slideUp(); $('#month'+month).slideDown(); $('.months a').removeClass('active'); $('.months a#linkMonth'+month).addClass('active'); current = month; } return false; }); }); </script> <script type="text/javascript"> $(document).on('click', '.toggleNextInfo', function () { $(this).parent().find('.info').toggle(); }); </script> </head> <body> <?php require('config.php'); require('date.php'); $date = new Date(); $year = date('Y'); $events = $date->getEvents($year); $dates = $date->getAll($year); ?> <div class="periods"> <div class="year"><?php echo $year; ?></div> <div class="months"> <ul> <?php foreach ($date->months as $id=>$m): ?> <li><a href="#" id="linkMonth<?php echo $id+1; ?>"><?php echo utf8_encode(substr(utf8_decode($m),0,3)); ?></a></li> <?php endforeach; ?> </ul> </div> <div class="clear"></div> <?php $dates = current($dates); ?> <?php foreach ($dates as $m=>$days): ?> <div class="month relative" id="month<?php echo $m; ?>"> <table> <thead> <tr> <?php foreach ($date->days as $d): ?> <th><?php echo substr($d,0,3); ?></th> <?php endforeach; ?> </tr> </thead> <tbody> <tr> <?php $end = end($days); foreach($days as $d=>$w): ?> <?php $time = strtotime("$year-$m-$d"); ?> <?php if($d == 1 && $w != 1): ?> <td colspan="<?php echo $w-1; ?>" class="padding"></td> <?php endif; ?> <td <?php if($time == strtotime(date('Ym-d'))): ?> class="today" <?php endif; ?>> <input type="button" class="toggleNextInfo"> <div class="relative"> <div class="day"><?php echo $d; ?></div> </div> <div class="daytitle"> <?php echo $date->days[$w-1]; ?> <?php echo $d; ?> <?php echo $date->months[$m-1]; ?> </div> </br> <ul class="events"> </br> </br> <?php if(isset($events[$time])): foreach($events[$time] as $e): ?> <div class="info" > <li > <?php echo $e; ?></li> <li> <form> <input type="radio" name="Disponibilité" value="Disponibilité"> Choisir cette disponibilite <input type="submit" name="Envoyer" value="Envoyer"> </form> </li> </div> <?php endforeach; endif; ?> </ul> </td> <?php if($w == 7): ?> </tr><tr> <?php endif; ?> <?php endforeach; ?> <?php if($end != 7): ?> <td colspan="<?php echo 7-$end; ?>" class="padding"></td> <?php endif; ?> </tr> </tbody> </table> </div> <?php endforeach; ?> </div> <div class="clear"></div> </div> </body> </html>

Answer 1

Use the document ready function always to add the events.

$(function(){

$(document).on('click', '.toggleNextInfo', function () {
    $(this).parent().find('.info').toggle();
});

});

Show / hide div?

Question

1 answers

solution1
1 2014-10-12 19:48:26

Show / hide div?

Question

1 answers

solution1 1 2014-10-12 19:48:26

solution1
1 2014-10-12 19:48:26