使用CSS块显示/隐藏文本

Question

I'm adding a small section to some community software (IPBoard). As shown in the picture below, they have a small triangle icon that triggers the display/hide of a css block.The link text to the right of the triangle icon hyperlinks to another URL. Only the triangle icon shows the css block. Easy enough.

For the small section I am adding (see picture below), I want the triangle icon and the link to expand the text for this section (not have the link go to another url). I've made hundreds of other modifications and can generally figure out CSS and basic php is no problem. But this collapsing and expanding text is really stumping me, after hours of trying. I know there's other ways to do this, but I'd like to leverage their existing technique rather than loading more code, if I can.

Here's my HTML code:

echo "<ul id='idm_categories'>";
    echo "<li class='with_sub closed'>";

        echo "<a href='#' id='not sure what would go here'>Scripture</a>";

            //Begin Hidden text that will display
            echo "<ul class='subforums' style='display: none'>";
                echo "<li><a href='http://link here' title='Go to category'>Pentateuch (Gen-Deu)</a></li>";


            echo "</ul>";
            //End hidden text


            //This makes the show/hide text possible but not sure how it works...
            echo "<a href='#' class='cat_toggle'>Toggle</a>";

        echo "</li>";

echo "</ul>";

The HTML references CSS. Here the relevant portion of that is:

#idm_categories a.cat_toggle {
    text-indent: -2000em;
    width: 12px;
    height: 12px;
    position: absolute;
    left: 8px;
    top: 11px;
    padding: 0;
}

    #idm_categories > li.with_sub.closed > a.cat_toggle {
        background: url({style_images_url}/folder_closed.png ) no-repeat;
    }

    #idm_categories > li.with_sub.open > a.cat_toggle {
        background: url({style_images_url}/folder_open.png ) no-repeat;
    }

    #idm_categories > li {
        /*border-bottom: 1px solid #f3f3f3;*/
        position: relative;
        padding: 0px;
    }

        #idm_categories > li:last-child {
            border: 0;
        }

        #idm_categories > li > a {
            display: block;
            padding: 10px 10px 5px 25px;
        }

        #idm_categories > li.selected > a {
            font-weight: bold;
            background: #4B76AD;
            color: #fff;
        }

    #idm_categories .file_count {
        font-size: 9px;
        padding: 1px 3px;
        font-weight: bold;
        color: #528F6C;
        background: #DFEBF7;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;
        margin: 11px 8px 0 0;
    }

    #idm_categories ul.subforums {
        margin: 0px 0 10px 35px;
        font-size: 0.9em;
        line-height: 1.5;
    }

The Javascript associated with this:

toggleCategory: function(e, elem)
    {
        Event.stop(e);

        var group = $( elem ).up('li');
        var subgroup = $( group ).down('.subforums');

        if( !$( group ) || !$( subgroup ) )
        {
            Debug.write("Can't find parent or subforums");
            return;
        }

        if( $( group ).hasClassName('closed') )
        {
            new Effect.BlindDown( $( subgroup ), { duration: 0.2 } );
            $( group ).removeClassName('closed').addClassName('open');
        }
        else
        {
            new Effect.BlindUp( $( subgroup ), { duration: 0.2 } );
            $( group ).removeClassName('open').addClassName('closed');
        }

    },

ToggleCategory is registered here:

ipb.delegate.register('.cat_toggle', ipb.idmportal.toggleCategory);

Answer 1

It is hard to know without seeing the whole javascript library but there are a couple of things you can try. Depending how the onclick event handler is added it might be this will work.

  echo "<a href='#' class='cat_toggle' id='not sure what would go here'>Scripture</a>";

It is also possible this will work, but I doubt it based on the code you showed above:

  echo "<a href='#' class='closed' id='not sure what would go here'>Scripture</a>";