Actually I have this problem. I have an apprenticeship that opens a title at a time and add me to an open / close image There is a problem in the sitting on the right side of the title.
I have so far said that once you click on a title, it removes the 'open' image and toggles another square for the 'close' image. As such, these sections need to be swapped again so that if you toggle any other title, then it removes the other image and returns to the original.
Here's the code I'm using.
JavaScript CSS I have removed a square and added another category as you can see $ ("# accordian li"). RemoveClass ("faq-header"); And the following $ (this) .addClass ("faq-header2"); has added, but now I need to remove faq-header2 and add it again because it is no longer the selected section. It does not seem very difficult for me, but I do not know how to code it. Should be a basic 'if function I think ... jQuery UI acronon is a well According to the cross browser widget, and open and close images (by default on the left, but a change of CSS will put them on the right) According to If you don 'T will not use it, I will continue with an option with toggle class, edit your HT Thank you for posting ML, I did not mean the whole page, HTML only for your ADRO functionality, but that's good The first thing to do, however, your HTML is just an Aestantian It seems a bit too, it is not completely valid for the UL inside (they are like going inside Liu, such as a drop down menu style). Apart from this, more of them all do not seem to be very much in UL and Lee because only one is in each UL, you really need to be compared to just a lot of tags. Ul and Lee come with lots of default styles (bullet points, margins, padding, indents, etc.), which means that you want to show them how you want them. I would have gone with a simple structure, it makes it easy to write your jQuery A little more Anyway, this was just a comment from my experience. For your problem in hand, it worked for me Toggleclass, however useful, however you want to add and remove sections, this is not as useful as I thought
& lt; SCRIPT & gt; Click $ ("# Accordion") (function () {$ ("# accordian li"). RemoveClass ("FAQ-header"); $ (this) .addClass ("faq-header2"); If (false == $ (this) is .next (). (': View')) {$ ('# AACIAN & gt; ul') SlideUp (250); $ ('# AACIAN & gt; UL' AddClass ('Fic-Header'); $ (this) .removeClass ("FAQ-Header");} $ (this) .next () SlideToggle (300);}); $ ('# Accordion & gt; ul: eq (0)') Show (); & Lt; / Script & gt; #accordion {list-style: none; Margin-left: -38px; } #accordion ul: eq {background-image: url (../ img / faq-open.gif); Background repeat: do not repeat; Background position: OK, Padding-right: 20px; } #accordion li {display: block; Background color: #fff; font-weight: bold; Cursor: indicator; } .faq-Haider {text-align: left; Background Image: URL (../img/faq-close.gif); Background repeat: do not repeat; Background position: OK, margin-right: 20px; } .faq-header2 {text-align: left; Background Image: URL (../img / faq-open.gif); Background repeat: do not repeat; Background position: OK, margin-right: 20px; } #accordion ul {list-style: none; display none; } #accordion ul li {font-weight: normal; Cursor: auto; Background color: #fff; Border bottom: 1px solid # 999; Left margin: -38 px! Important; }
& lt; Div id = "accordion" & gt; & Lt; H3 & gt; The first header & lt; / H3 & gt; & Lt; Div & gt; First Content & lt; / Div & gt; & Lt; H3 & gt; Second header & lt; / H3 & gt; & Lt; Div & gt; The second content & lt; / Div & gt; & Lt; / Div & gt;
$ ("# accordion> li"). Click (function () {var self = $ (this); self.next ('(' 'view' ')) {self.removeClass (' faq-header '). AddClass (' faq-header2 ')} and {AddClass ('faq-header2'). AddClass ('faq-header')}}); Self.siblings () RemoveClass ('faq-header2') addClass ('FAQ-header'). Next ('ul') SlideUp (250);});
Comments
Post a Comment