html - A simple jQuery accordion not working, help needed -
My skills in JavaScript in JQuery only extend to "Cut and Paste" -coding, and I appreciate some help with A.
When any H3 is clicked to expand the corresponding division with text, then all those are opened. Of course I would like to open them one at a time.
Here is the non-functional codepad:
HTML:
& lt; Html & gt; & Lt; Top & gt; & Lt; Script type = "text / javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" & gt; & Lt; / Script & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt; Div class = "workposts" & gt; & Lt; H3 class = "toggle-trigger" & gt; 2014-06-05 & lt; Span & gt; Title A & lt; / Span & gt; & Lt; / H3 & gt; & Lt; Div class = "toggle-content" & gt; & Lt; P & gt; This website has been automatically translated. For a small farm, click here & lt; / P & gt; & Lt; / Div & gt; & Lt; H3 class = "toggle-trigger" & gt; 2014-06-04 & lt; Span & gt; Title B & lt; / Span & gt; & Lt; / H3 & gt; & Lt; Div class = "toggle-content" & gt; & Lt; P & gt; Exceptive hidden artisans are being treated non-practicing, which is used for the makeup of this angle & lt; / P & gt; & Lt; / Div & gt; & Lt; H3 class = "toggle-trigger" & gt; 2014-05-19 & lt; Span & gt; Title C & lt; / Span & gt; & Lt; / H3 & gt; & Lt; Div class = "toggle-content" & gt; & Lt; P & gt; It is not entirely responsible for any errors to destroy all errors, and total records: jquery:
jQuery (document) .ready (function ($) {$ ('workposts'). Each (function () {$ ( Hide it (). (). ('. Toggle-content') ();}) $ ('. Workposts h3.toggle-trigger'). Click (function () {var el = $ (this), parent = El.remost ('. Workposts'); if (el.hasClass ('active')) {parent.find ('toggle-content'). SlideToggle (); el.removeClass ('active');} Other {Parent.find ('toggle-content') SlideToggle (); el.addClass ('active');} return false;});});
Your use of the basics seems problematic
JQuery (function ($) {$ (workposts .toggle-content '). Hide (); $ ('. Workposts h3.toggle-trigger '). Click (function () {var el = $ (this); El.toggleClass ('active'); el.next ('toggle-content'). Slideaggle (); return false;});}); Demo:
Comments
Post a Comment