I'm in the process of creating a calendar system using the Codeigniter framework. My goal is to display a specific div every time a day cell in the calendar template is clicked.
These divs are generated through a PHP for loop and populated from the database in the following view file:
calendar_view.php
<div class="cal_container">
<?php echo $calendar; ?>
<div class="day_expanded_container">
<?php for ($i = 1; $i<=31; $i++):?>
<div class="day_expanded" id"<?php echo 'd'.$i;?>">
<?php if (isset($calendar_info[$i])):?>
<h2><?php echo $calendar_info[$i]['title'];?></h2>
<p><?php echo $calendar_info[$i]['text']?></p>
<?php else: ?>
<h2>No Data for this Date</h2>
<p>There is currently nothing planned for this Calendar date.</p>
<?php endif; ?>
</div>
<?php endfor;?>
</div>
</div>
Next, the following jQuery script is implemented:
scripts.js
$(document).ready(function(){
var divs = $('div.day_expanded_container > div').get();
var today = $(".today").attr("id");
$(divs).hide().filter('#d' + today).show();
$(".day").click(function() {
var selected = $(this).attr("id");
$(divs).hide().filter('#d' + selected).show();
});
});
However upon page loading, all divs remain hidden and clicking does not reveal them at all.
All IDs appear correct and I've checked the CSS for potential conflicts, but I can't seem to find any issues. Could there be something obvious that I'm overlooking?
Thank you in advance!