Showing/Hiding text with css blocks

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.

Triangle expands the text

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.

What I need

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

There is javascript associated with the page. I have updated the question to account for the javascript. I guess it's not possible to implement with the default IPBoard javascript. — Josh Bond
– Josh Bond, Commented Dec 11, 2011 at 22:20
toggleCategory looks like an event handler, could you show where it is registered? — Douglas
– Douglas, Commented Dec 11, 2011 at 22:29
It's registered here: (updated the question with this as well) ipb.delegate.register('.cat_toggle', ipb.idmportal.toggleCategory); — Josh Bond
– Josh Bond, Commented Dec 11, 2011 at 22:34

Hogan · Accepted Answer · 2011-12-11 22:37:01Z

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>";

edited Dec 11, 2011 at 22:37

answered Dec 11, 2011 at 22:31

Hogan

70.7k10 gold badges83 silver badges119 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Josh Bond Over a year ago

cat_toggle will work after making some CSS changes, thank you.

Collectives™ on Stack Overflow

Showing/Hiding text with css blocks

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related