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;

}