javascript - Collapse Expand in jquery -


I am trying to expand and collapse content in jquery. But the toggle reverses the reaction. When I am expanding, it is showing content from bottom to bottom and when I fall, it is showing content from top to bottom and also, when it is expanding, I want the image to be content To come right. And when I fall, it must collapse and set it on top.

ago:

Enter image details here

I need it:

Enter image details here

Here's what I tried.

  ons.bootstrap (); $ (Document) .ready (function () {$ ("header"). Click (function () {$ ("content"). Slide toggle ();});});   
  & lt; Link href = "http://components.onsen.io/onsen-css-components-default.css" rel = "stylesheet" /> & Lt; Link href = "http://components.onsen.io/patterns/lib/onsen/css/onsenui.css" rel = "stylesheet" /> & Lt; Script src = "http://components.onsen.io/patterns/lib/onsen/js/angular/angular.js" & gt; & Lt; / Script & gt; & Lt; Script src = "http://components.onsen.io/patterns/lib/onsen/js/onsenui.js" & gt; & Lt; / Script & gt; & Lt; Script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" & gt; & Lt; / Script & gt; & Lt; Ons-list-item style = "minimum-height: 20px; row-height: 20px;" Class = "list__item ons-list-item-inner" & gt; & Lt; Div style = "cursor: indicator; margin-left: 291px;" Class = "header" & gt; & Lt; Ons-icon style = "font-size: 23px; font-weight: bold; color: # 000000; width: 1em" icon = "ion-navian" square = "ons-icon ion-more ons-icon-- onion-icon -Icon - FW FA-LG "& gt; & Lt; / Ons-icon & gt; & Lt; / Div & gt; & Lt; Div style = "margin-left: 12px; margin-top: -15px; display: block;" Class = "content" & gt; & Lt; Span style = "font-family: aerial; font-size: 14px; color: # 666666;" & Gt; Content 1 & lt; Br> Content 2 & lt; / Span & gt; & Lt; / Div & gt; & Lt; / Ons-list-item & gt;      

.content div starts as display Should: Anyone want to achieve that effect if you get that effect.

Comments

Popular posts from this blog

java - ImportError: No module named py4j.java_gateway -

python - Receiving "KeyError" after decoding json result from url -

.net - Creating a new Queue Manager and Queue in Websphere MQ (using C#) -