It's an old project that i'm updating so is not th prettiest of coding.
I am trying to adapt a plugin for my specific needs, the plugin in question is a simple colapsible panel plugin.
I want to be able to style each panel with a different color depending on the rel that is assigned to the div.
its actually php code that generates the css and the code for the div, i then call jquery to apply the collapsible panel plugin.
it styles everything ok but the click function does not work, any pointers would be most helpfull: am thinking i need to apply .delegate() somewhere but not sure how to.
The url: http://www.reelfilmlocations.co.uk/NEW%20Search/fullsearch_rework.php To get test results: click [choose all] above the select borough selector and click the search button.
the code that creates the panel:
//all this is wrapped in a php loop:
<style type="text/css">
.C_<?php echo $myCurrentBorough ?>_color{
color:<?php echo $row_rs_myBoroughs['color']; ?>;
font-family: Arial, Helvetica, sans-serif;
font-size:12px;
letter-spacing:1px;
text-transform:uppercase;
font-weight: bold;
}
.collapsibleContainer<?php echo $myCurrentBorough ?>{
border: solid 0px <?php echo $row_rs_myBoroughs['color']; ?>;
}
.collapsibleContainerTitle<?php echo $myCurrentBorough ?>{
cursor:pointer;
color:#000000;
background-color:<?php echo $row_rs_myBoroughs['color']; ?>
}
.collapsibleContainerTitle div<?php echo $myCurrentBorough ?>{
padding-top:5px;
padding-left:10px;
background-color:<?php echo $row_rs_myBoroughs['color']; ?>;
color:#607882;
}
.collapsibleContainerContent<?php echo $myCurrentBorough ?>{
padding: 10px;
background-color:<?php echo $row_rs_myBoroughs['color']; ?>;
}
</style>
<?php if($boroughCounter > 0){?>
<div class="collapsibleContainer<?php echo $myCurrentBorough; ?>" tabindex="<?php echo $myCurrentBorough; ?>" title="Locations Found In <?php echo $row_rs_myBoroughs['Borough_Name']; ?>" rel="<?php echo $myCurrentBorough; ?>">
MY DIV CONTENT GOES HERE
</div>
<script type="text/javascript">
$(document).ready(function() {
$(".collapsibleContainer<?php echo $myCurrentBorough; ?>").collapsiblePanel();
});
</script>
<?php } //end check to see if locations exist in borough?>
The jquery plugin:
(function($) {
$.fn.extend({
collapsiblePanel: function() {
// Call the ConfigureCollapsiblePanel function for the selected element
return $(this).each(ConfigureCollapsiblePanel);
}
});
})(jQuery);
function ConfigureCollapsiblePanel() {
$(this).addClass("ui-widget");
// Wrap the contents of the container within a new div.
$(this).children().wrapAll("<div class='collapsibleContainerContent"+$(this).attr("rel")+" ui-widget-content' rel='"+$(this).attr("rel")+"'></div>");
// Create a new div as the first item within the container. Put the title of the panel in here.
$("<div class='collapsibleContainerTitle"+$(this).attr("rel")+" ui-widget-header'><div>" + $(this).attr("title") + "</div></div>").prependTo($(this));
// Assign a call to CollapsibleContainerTitleOnClick for the click event of the new title div.
$(".collapsibleContainerTitle"+$(this).attr("rel")+"", this).click(CollapsibleContainerTitleOnClick());
}
function CollapsibleContainerTitleOnClick(myID) {
// The item clicked is the title div... get this parent (the overall container) and toggle the content within it.
$(".collapsibleContainerContent"+$(this).attr("rel")+"", $(this).parent()).slideToggle();
}