wordpress - Show/hide content of posts with jquery -


Using WordPress Loop and jquery, I am trying to show / hide the contents of the posts displayed.

After some searches I have come to this conclusion.

  $ f (function () ($ F ("Portfolio-Dissacus"). Hover (function () {$ f (".change") Toggle (function () {$ F ('. Highlight') SlideUp ('sharp');}, function () {$ F ('Highlight'). Slidedown ('sharp');});});});   

This works almost the first post works fine, but the second post expands the content of the first and second posts. And it does not stop showing / hiding Content is jumping! Odd stuff .. oh! Just saw that these "jumps" are incremental, starts with 1, then 2, then 3, ...

Thanks in advance! (And sorry for any mistake in my English.)

Ignore

Edit: Here is HTML

  & lt; Div id = "portfolioscontent" & gt; & Lt; Div class = "portfolio-destaques" & gt; & Lt; P class = "destaques-data" & gt; 2010-03-10 & lt; / P & gt; & Lt; H3 & gt; & Lt; A href = "#" class = "change" & gt; Maurice Alkit Metis Mets & lt; / A & gt; & Lt; / H3 & gt; & Lt; P & gt; Recovery: & lt; A href = "http: // localhost: 8888 / ASPP / requisite / userne /" rel = "tag" & gt; Ornare & lt; / A & gt; & Lt; A href = "http: // localhost: 8888 / aspp / requerente / pede /" rel = "tag" & gt; Paid & lt; / A & gt; Local Eggy Pound o: & lt; A href = "http: // localhost: 8888 / aspp / localizacao / matosinhos /" rel = "tag" & gt; Matoshenas & lt; / A & gt; Tipologia: & lt; A href = "http: // localhost: 8888 / asp / tipologia / amt /" rel = "tag" & gt; Amet & lt; / A & gt; & Lt; A href = "http: // localhost: 8888 / aspp / tipologia / elit /" rel = "tag" & gt; Elite & lt; / A & gt; & Lt; / P & gt; & Lt; Div class = "highlight" & gt; & Lt; P & gt; Any type of garbage can be used, it does not matter, but this is not a problem. Fuse Voltapet even works some time ago Even now for a short time now a portter a sem evict Sélestine Valle Magna has no meaning of postage stamp marriage How to do Vivamas Iegasas The number of vehicles in the present time Nelma Cyprian , Success or hollywood non, actor dipibus, pad & Lt; / P & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "portfolio-destaques" & gt; & Lt; P class = "destaques-data" & gt; 2006-11-08 & lt; / P & gt; & Lt; H3 & gt; & Lt; A href = "#" class = "change" & gt; Cross Alchemim Masta ullamcorper sapien & lt; / A & gt; & Lt; / H3 & gt; & Lt; P & gt; Reqnet: & lt; A href = "http: // localhost: 8888 / aspp / requerente / enim /" rel = "tag" & gt; Anime & lt; / A & gt; Local Eggy Pound o: & lt; A href = "http: // localhost: 8888 / aspp / localizacao / matosinhos /" rel = "tag" & gt; Matoshenas & lt; / A & gt; Tipologia: & lt; A href = "http: // localhost: 8888 / esp / tipologia / ipsum /" rel = "tag" & gt; Epsom & lt; / A & gt; & Lt; / P & gt; & Lt; Div class = "highlight" & gt; & Lt; P & gt; Get more information about Pellentesque or Projects can be used for any type of purification. Nula Kanguey is working on Vivamus site Phasal Matis Salisidine Legula Deus Dignisim Felis and Egg Whole Compu Mets Nam Pede Nobody Wins Asad Exxon Dollar AC Agu. Pelredesk Egate Lactus inquires about inquiries in any way Nullam blandit placerat sem Creative Quiz explains about the AppSpeed ​​draft, he says monetary support, nodes on the penguins, near some kind of braids, a brain mosquito Known as luggage. & Lt; / P & gt; & Lt; / Div & gt; & Lt; / Div & gt;   

and CSS:

  #portfoliocontent {status: full; Top: 20px; Correct: 60px; Width: 670 pixels; } .portfolio-destaques {status: relative; Background: Transparent url ('images / menu_bg_dark.png'); }. Portfolio-destaques: Hover {Background: Transparent url ('images / menu_bg.png'); }    

Now you slide all the elements up / down with .highlight and .change Are classes? You probably want to select this element, you can use tracering methods such as the closest () or advanced selectors to get the right element, or to make the post id or virtualized variable unique to the class or using a unique ID instead Can add to

Update: The HTML you posted should do the following:

  $ f (function () {$ f ("Change"). Toggle (function () ($. (This) .parents ("('. Highlight'). Children ('Highlight'). SlideUp ('Sharp');}, Function () {$ f (this) .parents (" Portfolio. - children ('. Highlight') .slideDown ('sharp');});});    

Comments