snapshot
/
UIExamplesS40


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
							<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Accordion</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" href="css/base_s40.css" type="text/css" />
    <meta name="Generator" content="Nokia WDE 3.2.0" />
    <style type="text/css">
      .sect {
        width:100%;
        border: solid 1px;
        background-color:#CED3C6;
		height: 30px;
      }
      
      .fold {
        -webkit-transition: height 0.3s linear;
        width:100%;
        background-color:#E9EBE6;
        overflow:hidden;
      }
      
      .hide-transition {
        height:0px;
      }
 
      .show-transition {
        height:75px;
      }
    </style>
  </head>

  <body>
    <div class="header_background">
      <table summary="" class="header_table" cellpadding="0" cellspacing="0">
        <tr>
          <td class="app_name">Accordion</td>
          <td class="header_search"><img alt="Home" src="img/header_home.png"/></td>
        </tr>
      </table>
    </div>
    
    <div id="accord1">
      <div onclick="mwl.setGroupTarget('#accord1','#fold1', 'show-transition', 'hide-transition');return false;" class="sect">
        Fold 1
      </div>
      <div id="fold1" class="show-transition fold">
        This is the content of the first fold
      </div>
      <div onclick="mwl.setGroupTarget('#accord1','#fold2', 'show-transition', 'hide-transition');return false;" class="sect">
        Fold 2
      </div>
      <div id="fold2" class="hide-transition fold">
        This is the content of the second fold
      </div>
      <div onclick="mwl.setGroupTarget('#accord1','#fold3', 'show-transition', 'hide-transition');return false;" class="sect">
        Fold 3
      </div>
      <div id="fold3" class="hide-transition fold">
        This is the content of the third fold
      </div>
    </div> 
    
  </body>
</html>