Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html><head>
<meta name="description" content="UI5 MVC example: Accordion with all initial collapsed sections" />
    <meta http-equiv='X-UA-Compatible' content='IE=edge' />
    <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
    
    <title>UI5 MVC example: Accordion with all initial collapsed sections</title>
    
    <!-- Load UI5, select gold reflection theme and the "commons" control library -->
    <script id='sap-ui-bootstrap' type='text/javascript'
        src='https://openui5.hana.ondemand.com/resources/sap-ui-core.js'
        data-sap-ui-theme='sap_bluecrystal'
        data-sap-ui-libs='sap.ui.commons, sap.ui.table'></script>
    
    <script>
        /*** DEFINE RE-USE COMPONENTS - NORMALLY DONE IN SEPARATE FILES ***/
        
        //Create the Accordion control
        var oAccordion = new sap.ui.commons.Accordion("accordionA"); 
        oAccordion.setOpenedSectionsId("-1");
        
        //Building Section 1
        var oSection1 = new sap.ui.commons.AccordionSection( "section1" );      
          oSection1.setTitle("Section 1");      
          oSection1.setTooltip("Section 1");
          oSection1.setMaxHeight("100px");
          for (var i=0 ; i < 5 ; i++){                
        var oCheckBox1 = new sap.ui.commons.CheckBox( "CheckBox1"+i );
          oCheckBox1.setText("CheckBox1 "+i);
          oSection1.addContent( oCheckBox1);          
        var oLabel1 = new sap.ui.commons.Label( "Label1"+i );
          oLabel1.setText("Label 1 "+i);                     
          oSection1.addContent( oLabel1);
          }                     
          oAccordion.addSection( oSection1 );
​
        //Building Section 2
        var oSection2 = new sap.ui.commons.AccordionSection( "section2");
          oSection2.setTitle("Section 2");      
          for (var i=0 ; i < 5 ; i++){        
        var oCheckBox2 = new sap.ui.commons.CheckBox( "CheckBox2"+i );
          oCheckBox2.setText("CheckBox2 "+i);
          oSection2.addContent( oCheckBox2);
          }     
          oAccordion.addSection( oSection2 );       
​
        //Building Section 3
        var oSection3 = new sap.ui.commons.AccordionSection( "section3");       
          oSection3.setTitle("Section 3");
          oSection3.setEnabled(false);  
        var oCheckBox3 = new sap.ui.commons.CheckBox( "CheckBox3" );
          oSection3.addContent( oCheckBox3);
          oAccordion.addSection( oSection3 );   
​
        //Building Section 4
        var oSection4 = new sap.ui.commons.AccordionSection( "section4");
          oSection4.setTitle("Section 4");      
        var oCheckBox4 = new sap.ui.commons.CheckBox( "CheckBox4" );        
          oSection4.addContent( oCheckBox4);                    
​
        //Accordion properties settings
          oAccordion.addSection( oSection4 );                           
          oAccordion.setWidth("200px");
                        
         oAccordion.placeAt("content");
    
    </script>
    
    </head>
    <body class='sapUiBody'>
        <div id='content'></div>
    </body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
mryqupro
0viewers