Clickable panel titles at Metronic theme

I wanted the panel titles to be clickable as well, instead of just the little icon on the far right side of the panel. This is easy with just a little javascript.

jQuery(‘body’).on(‘click’, ‘.portlet > .portlet-title’, function (e) {
    jQuery(this).find(‘.tools > .collapse, .tools > .expand’).each(function() {
        var el = jQuery(this).closest(“.portlet”).children(“.portlet-body”);
        if (jQuery(this).hasClass(“collapse”)) {
            jQuery(this).removeClass(“collapse”).addClass(“expand”);
            el.slideUp(200);
        } else {
            jQuery(this).removeClass(“expand”).addClass(“collapse”);
            el.slideDown(200);
        }
    });
});

jQuery(‘body’).on(‘click’, ‘.portlet > .portlet-title’, function (e) {

jQuery(this).find(‘.tools > .collapse, .tools > .expand’).each(function() {

var el = jQuery(this).closest(“.portlet”).children(“.portlet-body”);

if (jQuery(this).hasClass(“collapse”)) {

jQuery(this).removeClass(“collapse”).addClass(“expand”);

el.slideUp(200);

} else {

jQuery(this).removeClass(“expand”).addClass(“collapse”);

el.slideDown(200);

}

});

This is specific for the Metronic theme. This code was placed in the /assets/scripts/core/app.js ..

Comments

3 responses to “Clickable panel titles at Metronic theme”

October 19, 2016

David

This works like a charm! Just replaced jQuery with “$”
:)

October 19, 2016

David

You have to add the stopPropogation, otherwise you cannot click the up down arrow

$(“.portlet > .portlet-title”).click(function (e) {
e.stopPropagation();

February 24, 2017

Rengga

Can’t believe I found a specific code that I need, thanks!

Comments

3 responses to “Clickable panel titles at Metronic theme”

Leave a Reply Cancel reply

More posts

Credly only shows First and Last on public badgepage

Piwigo nginx problems

Google Family Link won’t unlock your child’s device

Outlook keeps asking for password