in that link above there are objects called as portlets. the thing i want is how could i make the portlets start as minimized by default.

Is there any possible ways to make it start as minimized in initial view?

http://jqueryui./demos/sortable/#portlets

in that link above there are objects called as portlets. the thing i want is how could i make the portlets start as minimized by default.

Is there any possible ways to make it start as minimized in initial view?

• javascript
• jquery
• jquery-ui

5 Answers 5

If you're going directly off of their example source code, then you simply need to update

.portlet-content { padding: 0.4em; } 

to

.portlet-content { display:none; padding: 0.4em; } 

and

.prepend( "<span class='ui-icon ui-icon-minusthick'></span>")

to

.prepend( "<span class='ui-icon ui-icon-plusthick'></span>")

Have you tried something like this?

$(function() {
    $( ".portlet-header" ).each(function(){
    $(this).toggleClass( "ui-icon-minusthick" ).toggleClass( "ui-icon-plusthick" );
    $(this).parents( ".portlet:first" ).find( ".portlet-content" ).hide();
    });
});

Inspirated by jaredhoyt I am using following:

1. into <style> section add .close { display:none; padding: 0.4em; }
2. into <script> section add $( ".closehead" ).prepend( "<span class='ui-icon ui-icon-plusthick'></span>");
3. add value close into class of the each portlet-content which you want to collapse <div class="portlet-content close" id="detailed2">
4. add value closehead into class of the each portlet-header for which you want to setup plus thick <div class="portlet-header closehead">Details</div>

Try this

$(document).ready(function(){
    var h = $('#action').parents(".header");
    var c = h.next('.porlets-content');
    var p = h.parent();
    c.slideToggle();
    p.toggleClass('closed');
});

"action" is the ID of the HTML element that contains the button to minimize the portlet.

Look at my example below:

<div id="action" class="actions">
  <a href="#" class="minimize"><i class="fa fa-chevron-down"></i></a>
</div>

Maximize adding on page;

<div class="portlet-widgets">
    <a data-toggle="collapse" data-parent="#accordion1" href="#portlet1"><i class="ion-minus-round"></i></a>
</div>
<div id="portlet1" class="panel-collapse collapse in"></div>

Minimize adding on page;

<div class="portlet-widgets">
    <a data-toggle="collapse" data-parent="#accordion2" href="#portlet2" class="collapsed"><i class="ion-minus-round"></i></a>
</div>
<div id="portlet2" class="panel-collapse collapse"></div>