javascript - Expand and Collapse with Slide Animation -

I want a clickable text with sliding animation. I currently have:

Javascript: ( expand-collapse.js )

  $ (document) Ready (work () ($ (".content"), hide (); $ ("title"). Click (function () {var header = $ (this); header.next ("content") Slide toggle (250);});});  

HTML:

   LT; style & gt; .heading {cursor: indicator; thickness of fonts: bold;} & lt; / style & gt; & lt; script src = "js / jquery-1.11.1.min.js" & gt; & Lt; / script & gt; script src = "js / expand-collapse.js" & gt; & lt; / script & gt; & lt; / head & gt; & gt; body & gt; & lt; Lt; div and Image = "Heading"> View SEAT map (extension / collapse)  << img class = "content" src = "image / sitemap page" width = "500" height = "300 "Alt =" seatmap ">   

Output:

See SEAT MAP (Expand / Collapse) So far, it spreads and falls as it should, Instead of having a static text instead of

all the time, I want to say it

See Seat MAP ( Istar)
seat MAP (compressed) See EXPAND and COLLAPSE text to a and gt; As with being clickable

(as opposed to the entire title div). I am very new to JS.

Add a a at the top:

 < Code> & lt; Div class = "heading" & gt; View SEAT mAP & lt; One square = "slide-toggle" & gt; EXPAND & lt; / A & gt; & Lt; / Div & gt; Click  

New a to handle the event and set the text accordingly:

  $ (document) .ready (function ($. (". Content"). ($ "Slide-Toggle"). (Function () {$ (this) .Parent (). Next ("content") SlideToggle (250); ($ (This) .text () == 'Xpad') {$ (this) .text ('COLLAPSE');} and {$ (this) .text ('EXPAND');}})}}; Note: I have kept it very easy for you and have made changes to what you have already done. For example, if the shortcut  if  The statement can be a better overall viewpoint and a small piece of synthetic sugar, but I have kept it simple too.