Question

I have a small issue. I can’t seem to get the script to recognise the h3 tag. I can’t just keep it as h3, I must add a class to it.

Markup:

<h3 class="jjheader">
    <?php echo $listitem->title ?>
</h3>

CSS:

#accordion h3.jjheader { 
    padding: 8px 8px 8px 8px; 
    font-weight: bold; 
    font-size: 12px; 
    color: #666666;
    margin-top: 5px; 
    cursor: pointer; 
    border: 1px solid #444444;
    border-radius: 8px;
    background: #151515;
}

It works fine if I don’t add a class to h3 and replace .jjheader with h3 in the script below, however with the class, it doesn’t.

Script:

<script type="text/javascript">
     var parentAccordion=new TINY.accordion.slider('parentAccordion'); 
     parentAccordion.init('accordion','.jjheader',0,1,'accordion-selected');
</script>

The accordion is based on the TinyAccordion JavaScript Accordion package from http://www.scriptiny.com/2009/03/accordion/

Can someone please point in the right direction?

Answer 1

The script starts out with defining T$$, which is only ever used in init. That function finds an element by tag name, within a container. It could easily be modified to use class selectors, for instance:

function T$$(e,p){
    if(e[0] == '.') {
       var matches = p.getElementsByClassName(e.substring(1));
       return matches.length == 0 ? null : matches[0];
    } else {
       return p.getElementsByTagName(e);
    }
}

The above code uses getElementsByClassName if the first character of the passed search string is a dot, indicating a css class selector; otherwise, it returns an element by tag name, as in the original source.

You could of course extend this, by checking for a leading # and doing getElementById, for instance. If you are already running jQuery on your site, you could simplify it and utilize jQuery’s sizzle selector:

function T$$(e,p) { return $(p).find(e); }