Question

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();
}

Answer 1

The click method is invoking the function, instead of passing a reference to the function. Remove the () and the event will trigger.

CURRENT CODE:
$(“.collapsibleContainerTitle”+$(this).attr(“rel”)+””, this).click(CollapsibleContainerTitleOnClick());

FIXED CODE:
$(“.collapsibleContainerTitle”+$(this).attr(“rel”)+””, this).click(CollapsibleContainerTitleOnClick);