javascript - Collapse Expand in jquery -

javascript - Collapse Expand in jquery -

i trying expand , collapse content in jquery. toggle responding reversely. when expanding, showing content bottom top , when collapsing, showing content top bottom. , also, when expanding, want image come right of content. , when collapsing, should collapse , set top.

before:

i need this:

here tried.

class="snippet-code-js lang-js prettyprint-override">ons.bootstrap(); $(document).ready(function() { $(".header").click(function() { $(".content").slidetoggle(); }); }); class="snippet-code-html lang-html prettyprint-override"><link href="http://components.onsen.io/onsen-css-components-default.css" rel="stylesheet" /> <link href="http://components.onsen.io/patterns/lib/onsen/css/onsenui.css" rel="stylesheet" /> <script src="http://components.onsen.io/patterns/lib/onsen/js/angular/angular.js"></script> <script src="http://components.onsen.io/patterns/lib/onsen/js/onsenui.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <ons-list-item style="min-height: 20px; line-height: 20px;" class="list__item ons-list-item-inner"> <div style="cursor:pointer; margin-left: 291px;" class="header"> <ons-icon style="font-size: 23px; font-weight: bold; color: #000000; width: 1em" icon="ion-navicon" class="ons-icon ion-more ons-icon--ion ons-icon--fw fa-lg"></ons-icon> </div> <div style="margin-left: 12px; margin-top: -15px; display: block;" class="content"> <span style="font-family: arial; font-size: 14px; color: #666666;">content 1<br>content 2</span> </div> </ons-list-item>

the .content div should start display:none if want accomplish effect.

javascript jquery html css