Little help with Panel Box Toggles 1.1 plug in ?

danytothetowers

Hi everybody,
I've installed Panel Box plug in on my forum, and I've made a few changes to be like this:

I don't know if it is possible, but I need that when I press "arrow down icon" let me show the discussions containing on "General", "OET" and "Maestros" with the same format as the categories menu that the image shows, I'm rookie as hell doing this, but I want to learn about it

My panelboxtoggles.js is like this

jQuery(document).ready(function($){
// Find all panel boxes
$('#Panel .Depth1:not(.Group)').addClass('PanelBoxToggle');

// Add click handler and trigger it
$('.PanelBoxToggle').click(function(event) {    
    if($(this).children('a').length > 0) { //
        event.preventDefault();
        //ToggleClass shows content
        if($(this).toggleClass('Collapsed')){
            $('.PanelInfo').children().click(function(){
            $(this).children('.ClearFix').slideToggle('slow');     
            }).children('.ClearFix').click(function (event) {
            event.stopPropagation();
            });
            alert('Run this alert to test if "if" works');
        }
        //slideToggle hides the content
        $(this).children(':not(:first-child)').slideToggle();
    }
});

// Collapse all the panels by default
$('.PanelBoxToggle').not('.BoxCategories').children('a ~ *').hide();

// Prevent links from closing the panel box
$('.PanelBoxToggle').click(function(event) {
    event.stopPropagation();
}); 

});

And my panelboxtoggles.css is like this

Panel .Depth1.PanelBoxToggle.Collapsed {

padding-right: 20px;
background-image: url('arrow.png');
background-repeat: no-repeat;
background-position: 95% 9px;

}

Panel .Depth1.PanelBoxToggle {

padding-right: 20px;
background-image: url('arrow-down.png');
background-repeat: no-repeat;
background-position: 95% 9px;

}

danytothetowers

This is my HTML code

hgtonight

Are you trying to emulate nested categories?

This is supported out of the box in Vanilla.